一、前言

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

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

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

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

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

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

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

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

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

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

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

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

①頁面預(yù)渲染

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

②DNS 預(yù)解析

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

③TCP 預(yù)連接

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

④資源預(yù)取

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

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

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

三、具體落地：一個(gè) link 標(biāo)簽

關(guān)于預(yù)加載預(yù)解析方面的技術(shù) http 方向有，html 的 link 標(biāo)簽也通過 ref=“prefetch”，ref=“prerender”，ref=“dns-prefetch” 來支持。

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

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

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

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

四、寫在后面

所以了解學(xué)習(xí)瀏覽器的優(yōu)化機(jī)制策略手段，對我們做針對瀏覽器方向，在具體的應(yīng)用程序上做優(yōu)化是有意義的，因?yàn)樗鼈兪窍⑾⑾嚓P(guān)的。

總的來說，具體到每個(gè)文檔頁面，我們應(yīng)該關(guān)注以下這幾點(diǎn)：

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

tips：所有有關(guān)瀏覽器的技術(shù)，都應(yīng)該注意瀏覽器差異和瀏覽器兼容性，本文提到的有關(guān)技術(shù)手段也不例外。

到此這篇關(guān)于基于JavaScript概括瀏覽器方向的優(yōu)化的文章就介紹到這了,更多相關(guān)JS瀏覽器方向內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論