基于JavaScript概括瀏覽器方向的優(yōu)化

更新時間：2022年05月31日 08:30:17 作者：??靈扁扁????

這篇文章主要介紹了JavaScript瀏覽器方向的優(yōu)化，文章圍繞主題展開詳細的內容介紹具有一定的參考價值，需要的小伙伴可以參考一下

一、前言

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

市面上的瀏覽器很多，據統(tǒng)計超過 8 0種，很多你可能都沒聽過，例如 greenbrowser,chromeplus（楓樹）， Lunascape，糖果瀏覽器，彗星瀏覽器，Gomodo Dragon，蜜蜂瀏覽器，Slim Browser等。

不管啥瀏覽器，也不過有多少種瀏覽器，瀏覽器性能永遠是避不開的話題，也常常是各大瀏覽器發(fā)布會上“賣點”。

至此，瀏覽器性能重要性不言而喻了。那么接下來，就看看關于瀏覽器方向的優(yōu)化，以及我們具體上能做些什么。

tips：清楚本文是關于介紹瀏覽器方向的優(yōu)化，對于讀懂本文并有所收獲很重要。

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

一字指的是“預”字，一圖指的是下面這張概括瀏覽器方向優(yōu)化的腦圖。

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

盡管如此，從核心優(yōu)化策略的角度看，也可以大致的將針對瀏覽器方向的優(yōu)化分為兩類：

一是，文檔類優(yōu)化
二是，推測類優(yōu)化

也就是說，關于瀏覽器方向的優(yōu)化，在核心優(yōu)化策略上，可以分為兩個方向，一是文檔優(yōu)化方向，二是瀏覽器推測性優(yōu)化方向。

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

①頁面預渲染

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

②DNS 預解析

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

③TCP 預連接

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

④資源預取

和頁面相關的解析器，例如文檔解析器、樣式解析器、腳本解析器等，可以和網絡協(xié)議層溝通，聲明預加載某些資源。某些資源，當然是指那些初始化渲染必要的資源，必要而又會阻塞繼續(xù)渲染的資源。

tips1：綜上圖文信息，一字是四種技術手段的“預”，一圖是概括瀏覽器方向優(yōu)化的腦圖。

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

三、具體落地：一個 link 標簽

關于預加載預解析方面的技術 http 方向有，html 的 link 標簽也通過 ref=“prefetch”，ref=“prerender”，ref=“dns-prefetch” 來支持。

通過 link 標簽 ref 提示一些關鍵字，告訴瀏覽器為我們采用對應的優(yōu)化機制。舉例 link 標簽在這方面的應用：

<!-- 預解析特定的域名 -->
<link rel="dns-prefetch"  rel="external nofollow" >
<!-- 預獲取某些頁面要用到的關鍵資源 -->
<link rel="subresource"  rel="external nofollow" >
<!-- 預獲取某些將來要用的資源，例如瀏覽器標簽上小 logo 圖標等 -->
<link rel="prerender"  rel="external nofollow" >
<!-- 預渲染某些指定頁面 -->
<link rel="prefetch"  rel="external nofollow" >

tips：link，HTML 外部資源鏈接元素，規(guī)定了當前文檔與外部資源的關系。

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

四、寫在后面

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

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

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