一字一圖,領略瀏覽器方向的優化

語言: CN / TW / HK

一、寫在前面

再過半個月,Internet Explorer 就正式退役了,曾經的瀏覽器霸主,服役超過25年的瀏覽器落幕。它的落幕可能有多方面因素綜合的結果,但瀏覽器效能和使用者體驗不符預期,必然是它被市場和使用者所“拋棄”的重要原因。

市面上的瀏覽器很多,據統計超過 8 0種,很多你可能都沒聽過,例如 greenbrowser,chromeplus(楓樹),

Lunascape,糖果瀏覽器,彗星瀏覽器,Gomodo Dragon,蜜蜂瀏覽器,Slim Browser等。

不管啥瀏覽器,也不過有多少種瀏覽器,瀏覽器效能永遠是避不開的話題,也常常是各大瀏覽器釋出會上“賣點”。

至此,瀏覽器效能重要性不言而喻了。

那麼接下來,就看看關於瀏覽器方向的優化,以及我們具體上能做些什麼。

tips:清楚本文是關於介紹瀏覽器方向的優化,對於讀懂本文並有所收穫很重要。

二、高談闊論:“一字一圖”

一字指的是“預”字,一圖指的是下面這張概括瀏覽器方向優化的腦圖。

聰慧的你,相信看出了一些東西。我們知道,不同的瀏覽器,它們的核心,它們的內部執行機制,可能是有所不同,這意味著在具體的優化技術上,可能要“因地制宜”,才能更好的奏效,是瀏覽器效能和使用者體驗得到提升。

儘管如此,從核心優化策略的角度看,也可以大致的將針對瀏覽器方向的優化分為兩類:

一是,文件類優化

二是,推測類優化

也就是說,關於瀏覽器方向的優化,在核心優化策略上,可以分為兩個方向,一是文件優化方向,二是瀏覽器推測性優化方向。

而在具體的技術手段上,主要分為下面這四種技術:

①頁面預渲染

頁面預渲染,是通過猜測你可能要訪問的目標,從而在隱藏的標籤頁中預先渲染整個頁面。當然,如果你是首次訪問某個目標,這可能不理想。注意,這是通過我們的一些表示,例如輸入部分關鍵字,此時我們還沒確定訪問,也還沒正式訪問,但瀏覽器通過一些線索,推測我們可能要訪問的目標,預先渲染了這些頁面。當用戶真正訪問瀏覽器猜中並提前渲染的目標頁面時,相信會有一種這個瀏覽器或這個站點響應速度真快的“錯覺”。我們無可否認,這是一種令大多數使用者滿意的表現,所以,頁面預渲染很棒。

②DNS 預解析

DNS 預解析,有點頁面預渲染的味道,當然,這一步通常發生在頁面預渲染的前面。它是一種通過推測使用者可能要訪問的域名,提前對這些域名進行解析,從而縮短使用者感知到的耗費時間,提升體驗的手段。既然是推測提前解析,那麼推測的依據是啥呢?這可能和瀏覽器的標籤頁,滑鼠懸浮指向,導航歷史等有關。我們知道,http 請求是存在DNS延遲的,而如果瀏覽器的推測正確,提前進行了 DNS 解析,這種延遲問題可以得到很好的處理。

③TCP 預連線

瀏覽器推測性的提前開始 TCP 連線,就是所說的 TCP 預連線,它發生在 DNS 解析之後。TCP 預連線能帶來的好處是,假如瀏覽器的推測正確,那麼可以省下一次完整的 TCP 握手實踐。不要小瞧這一次握手的時間,這對機器而言,可以發生很多事,尤其是在“搶先佔位”這種方向上。

④資源預取

和頁面相關的解析器,例如文件解析器、樣式解析器、指令碼解析器等,可以和網路協議層溝通,宣告預載入某些資源。某些資源,當然是指那些初始化渲染必要的資源,必要而又會阻塞繼續渲染的資源。

tips1:綜上圖文資訊,一字是四種技術手段的“預”,一圖是概括瀏覽器方向優化的腦圖。

tips2:上面提到的策略和手段,其實瀏覽器本身已經做了,或者說瀏覽器廠商已經做了。所以說這有點“高談闊論”的意思,而我們需要清楚這些機制和特點,從而做一些更具體的,普通開發人員能做的事情,從而提升經我們手上開發的應用的效能。

具體落地:一個 link 標籤

關於預載入預解析方面的技術 http 方向有,html 的 link 標籤也通過 ref=“prefetch”,ref=“prerender”,ref=“dns-prefetch” 來支援。

通過 link 標籤 ref 提示一些關鍵字,告訴瀏覽器為我們採用對應的優化機制。舉例 link 標籤在這方面的應用:

<!-- 預解析特定的域名 -->

<link rel="dns-prefetch" href="//example.com">

<!-- 預獲取某些頁面要用到的關鍵資源 -->

<link rel="subresource" href="//example.com/app.js">

<!-- 預獲取某些將來要用的資源,例如瀏覽器標籤上小 logo 圖示等 -->

<link rel="prerender" href="//example.com/logo.png">

<!-- 預渲染某些指定頁面 -->

<link rel="prefetch" href="//example.com/index.html">

複製程式碼

tips:link,HTML 外部資源連結元素,規定了當前文件與外部資源的關係。

tips:注意到了嗎?這些具體落地的,使用在我們開發的應用程式上的技術上,是不是和前述的高談闊論“一字一圖”息息相關。