一、前言

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

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

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

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

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

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

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

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

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

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

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

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

①頁(yè)面預(yù)渲染

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

②DNS 預(yù)解析

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

③TCP 預(yù)連接

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

④資源預(yù)取

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

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

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

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

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

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

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

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

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

四、寫(xiě)在后面

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

總的來(lái)說(shuō)，具體到每個(gè)文檔頁(yè)面，我們應(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論