本文是Web前端性能優(yōu)化系列文章中的第五篇，主要講述內(nèi)容：網(wǎng)站樣式和腳本代碼的放置位置、使用外部javascript和css。完整教程可查看：Web前端性能優(yōu)化

一、將樣式表放在頂部

可視性回饋的重要性

進(jìn)度指示器有三個(gè)主要優(yōu)勢(shì)——它們讓用戶知道系統(tǒng)沒有崩潰，只是正在為他或她解決問題；它們指出了用戶大概還需要等多久，以便用戶能夠在漫長(zhǎng)的等待中做些其他事情；最后，它們能給用戶提供一些可以看的東西，使得等待不再是那么無聊。最后一點(diǎn)優(yōu)勢(shì)不可低估，這也是為什么推薦使用圖形進(jìn)度條而不是僅僅以數(shù)字形式顯示預(yù)期的剩余時(shí)間。在Web的世界里，Html頁(yè)面的逐步呈現(xiàn)就是很好的進(jìn)度指示器。

將沒有立即使用的css放在底部是錯(cuò)誤的做法

通常組件的下載是按照文檔中出現(xiàn)的順序下載的，所以將不需要立即使用到的組件css(比如需要用戶點(diǎn)擊登錄彈出框需要用到的樣式)放在底部，可以得到一個(gè)加載很快的頁(yè)面。然而這個(gè)推論其實(shí)是錯(cuò)誤的，IE8以下(包括IE8)的工作方式是如果css表仍在加載，構(gòu)建呈現(xiàn)樹就是一種浪費(fèi)，因?yàn)樵谒�有樣式表加載并解析完畢之前無需繪制任何東西，這時(shí)整個(gè)瀏覽器顯示都是空白，直到css加載完畢，這就失去了提供可視化回饋的機(jī)會(huì)，讓用戶感覺到緩慢。

不過，更高級(jí)版本的IE和其他瀏覽器已經(jīng)克服了“白屏”問題，所以這種情況已經(jīng)不復(fù)存在。

無樣式內(nèi)容的閃爍

這里將討論另外一種出現(xiàn)的情況，當(dāng)我們將css放在底部，頁(yè)面可以正常逐步呈現(xiàn)，但在css下載并解析完畢之后，已經(jīng)呈現(xiàn)的文字和圖片就要用新的樣式重繪了，這就是“無樣式內(nèi)容的閃爍”，這將是一種不好的用戶體驗(yàn)。

CSS的最佳擺放位置

使用LINK標(biāo)簽將樣式表放在文檔HEAD中。

二、將腳本放在底部

并行下載

瀏覽器下載組件的時(shí)候并不是每次只下載一個(gè)組件，而是實(shí)現(xiàn)了并行下載的機(jī)制。HTTP規(guī)范1.1建議瀏覽器從每個(gè)主機(jī)名并行地下載兩個(gè)組件。既假如頁(yè)面的所有組件都來自于一個(gè)主機(jī)名，則每次只能同時(shí)下載兩個(gè)組件。如果組件使用了兩個(gè)主機(jī)名，而且組件的主機(jī)名分配均勻，則每次并行下載的數(shù)量變成了2*2=4。不過，當(dāng)代的瀏覽器普遍實(shí)現(xiàn)都超過了2個(gè)并行下載，不同的瀏覽器設(shè)置都有所不同。

腳本阻塞下載

并行下載組件能加快頁(yè)面的加載速度，然而，在下載腳本的時(shí)候并行下載實(shí)際上是被禁用的，即使其他組件使用了不同的主機(jī)名，瀏覽器也不會(huì)啟動(dòng)其他的下載。原因如下：1. 腳本可能使用了document.write來修改頁(yè)面內(nèi)容，因此瀏覽器會(huì)等待，以確保能夠恰當(dāng)?shù)夭季郑?. 為了保證腳本能夠按照正確的順序執(zhí)行，如果并行下載多個(gè)組件，就無法保證響應(yīng)是按照特定順序到達(dá)瀏覽器的。

所以，腳本放在越靠近頂部的地方將越延遲用戶的可視化反饋，這不是一種良好的用戶體驗(yàn)，會(huì)讓用戶感覺到緩慢。

最佳做法

放置腳本的最好地方是頁(yè)面的底部，這不會(huì)阻止頁(yè)面內(nèi)容的呈現(xiàn)，而且頁(yè)面的可視化組件可以盡早下載。以博客園為例，博客園就把google流量分析的js放在底部，同時(shí)把下載Blog新聞和Blog側(cè)邊欄的js執(zhí)行函數(shù)放在了底部。

三、使用外部javascript和css

基礎(chǔ)知識(shí)

頁(yè)面瀏覽量(PV)：用戶對(duì)頁(yè)面請(qǐng)求訪問次數(shù)總和。

內(nèi)聯(lián) VS 外置

對(duì)于兩個(gè)相同大小的頁(yè)面，一個(gè)使用了內(nèi)聯(lián)，只有html需要下載，一個(gè)使用了外置，包括一個(gè)js和一個(gè)css，在用戶不帶緩存訪問頁(yè)面的時(shí)候，內(nèi)聯(lián)所有的js和css的效率更快，原因是外置js和css帶來額外的http請(qǐng)求開銷，1個(gè)http請(qǐng)求相對(duì)于3個(gè)http請(qǐng)求要更快一些。盡管如此，現(xiàn)實(shí)中還是使用外部文件會(huì)產(chǎn)生較快的訪問速度，這是由于外部js和css有機(jī)會(huì)被瀏覽器緩存起來，當(dāng)再次請(qǐng)求相同的js或css的時(shí)候，瀏覽器將不會(huì)發(fā)出http請(qǐng)求，而是使用緩存的組件，減少了總體需要下載文件的大小。

綜合來講，我們一般推薦使用外置的js和css，不過這也要根據(jù)自身web的訪問場(chǎng)景以及PV做出最優(yōu)選擇。

如何劃分組件？

當(dāng)我們決定使用外置js和css的時(shí)候，這時(shí)怎樣劃分js和css并打包到外部文件中成為一個(gè)首要考慮的問題。在典型情況下，頁(yè)面之間的js和css的重用既不可能100%重疊，也不可能100%無關(guān)。

一種極端的做法是創(chuàng)建一個(gè)單獨(dú)的，聯(lián)合了所有js的文件，再創(chuàng)建一個(gè)包含了所有css的文件。這只要求用戶生成一個(gè)Http請(qǐng)求，但它增加了用戶不帶緩存訪問的情況下的數(shù)據(jù)量，同時(shí)我們必須清楚：緩存有時(shí)會(huì)失效，這將帶來更多額外的開銷。而且，在任何一塊獨(dú)立的js或css改變后，都需要更新文件，并發(fā)布新的版本號(hào)，這將使所有客戶端的舊版本緩存失效。

另一種極端的做法是為每個(gè)頁(yè)面提供一組分離的外部文件，這種方式真正做到按需下載，但缺點(diǎn)在于每個(gè)頁(yè)面都產(chǎn)生令響應(yīng)時(shí)間變慢的HTTP請(qǐng)求。

對(duì)于大多數(shù)web應(yīng)用來說，我們需要一種折中的方案！將頁(yè)面劃分為幾種頁(yè)面類型，然后為每種類型創(chuàng)建單獨(dú)的js和css。以css為例，我們可以創(chuàng)建一個(gè)所有頁(yè)面都通用的global.css，再針對(duì)不同類型的頁(yè)面，創(chuàng)建對(duì)應(yīng)的css。

完整教程可查看：Web前端性能優(yōu)化

標(biāo)簽： Web前端性能優(yōu)化教程 Web前端優(yōu)化 性能優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。