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

一、寫在前面

再過半個月，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 標籤在這方面的應用：

```html

```

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

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

寫在後面

所以瞭解學習瀏覽器的優化機制策略手段，對我們做針對瀏覽器方向，在具體的應用程式上做優化是有意義的，因為它們是息息相關的。

總的來說，具體到每個文件頁面，我們應該關注以下這幾點：

儘可能早的讓關鍵資源出現在文件上，例如一些關鍵的 js 指令碼和 css 資源。
注意 css 渲染阻塞的特點，儘早載入交付它們。
注意合理安排 js 資源，合理利用 script 的 defer（延遲）和 async（非同步）屬性，考慮推遲或非同步獲取一些非關鍵指令碼資源，從而避免阻塞 CSSOM 和 DOM 的構建。

tips：所有有關瀏覽器的技術，都應該注意瀏覽器差異和瀏覽器相容性，本文提到的有關技術手段也不例外。