一、將樣式表放在頂部
可視性回饋的重要性
進(jìn)度指示器有三個(gè)主要優(yōu)勢——它們讓用戶知道系統(tǒng)沒有崩潰，只是正在為他或她解決問題；它們指出了用戶大概還需要等多久，以便用戶能夠在漫長的等待中做些其他事情；最后，它們能給用戶提供一些可以看的東西，使得等待不再是那么無聊。最后一點(diǎn)優(yōu)勢不可低估，這也是為什么推薦使用圖形進(jìn)度條而不是僅僅以數(shù)字形式顯示預(yù)期的剩余時(shí)間。在Web的世界里，Html頁面的逐步呈現(xiàn)就是很好的進(jìn)度指示器。
將沒有立即使用的css放在底部是錯(cuò)誤的做法
通常組件的下載是按照文檔中出現(xiàn)的順序下載的，所以將不需要立即使用到的組件css(比如需要用戶點(diǎn)擊登錄彈出框需要用到的樣式)放在底部，可以得到一個(gè)加載很快的頁面。然而這個(gè)推論其實(shí)是錯(cuò)誤的，IE8以下(包括IE8)的工作方式是如果css表仍在加載，構(gòu)建呈現(xiàn)樹就是一種浪費(fèi)，因?yàn)樵谒袠邮奖砑虞d并解析完畢之前無需繪制任何東西，這時(shí)整個(gè)瀏覽器顯示都是空白，直到css加載完畢，這就失去了提供可視化回饋的機(jī)會(huì)，讓用戶感覺到緩慢。
不過，更高級(jí)版本的IE和其他瀏覽器已經(jīng)克服了“白屏”問題，所以這種情況已經(jīng)不復(fù)存在。
無樣式內(nèi)容的閃爍
這里將討論另外一種出現(xiàn)的情況，當(dāng)我們將css放在底部，頁面可以正常逐步呈現(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è)組件。既假如頁面的所有組件都來自于一個(gè)主機(jī)名，則每次只能同時(shí)下載兩個(gè)組件。如果組件使用了兩個(gè)主機(jī)名，而且組件的主機(jī)名分配均勻，則每次并行下載的數(shù)量變成了2*2=4。不過，當(dāng)代的瀏覽器普遍實(shí)現(xiàn)都超過了2個(gè)并行下載，不同的瀏覽器設(shè)置都有所不同。
腳本阻塞下載
并行下載組件能加快頁面的加載速度，然而，在下載腳本的時(shí)候并行下載實(shí)際上是被禁用的，即使其他組件使用了不同的主機(jī)名，瀏覽器也不會(huì)啟動(dòng)其他的下載。原因如下：1. 腳本可能使用了document.write來修改頁面內(nèi)容，因此瀏覽器會(huì)等待，以確保能夠恰當(dāng)?shù)夭季郑?. 為了保證腳本能夠按照正確的順序執(zhí)行，如果并行下載多個(gè)組件，就無法保證響應(yīng)是按照特定順序到達(dá)瀏覽器的。
所以，腳本放在越靠近頂部的地方將越延遲用戶的可視化反饋，這不是一種良好的用戶體驗(yàn)，會(huì)讓用戶感覺到緩慢。
最佳做法
放置腳本的最好地方是頁面的底部，這不會(huì)阻止頁面內(nèi)容的呈現(xiàn)，而且頁面的可視化組件可以盡早下載。以博客園為例，博客園就把google流量分析的js放在底部，同時(shí)把下載Blog新聞和Blog側(cè)邊欄的js執(zhí)行函數(shù)放在了底部。
三、使用外部javascript和css
基礎(chǔ)知識(shí)
頁面瀏覽量(PV)：用戶對(duì)頁面請求訪問次數(shù)總和。
內(nèi)聯(lián) VS 外置
對(duì)于兩個(gè)相同大小的頁面，一個(gè)使用了內(nèi)聯(lián)，只有html需要下載，一個(gè)使用了外置，包括一個(gè)js和一個(gè)css，在用戶不帶緩存訪問頁面的時(shí)候，內(nèi)聯(lián)所有的js和css的效率更快，原因是外置js和css帶來額外的http請求開銷，1個(gè)http請求相對(duì)于3個(gè)http請求要更快一些。盡管如此，現(xiàn)實(shí)中還是使用外部文件會(huì)產(chǎn)生較快的訪問速度，這是由于外部js和css有機(jī)會(huì)被瀏覽器緩存起來，當(dāng)再次請求相同的js或css的時(shí)候，瀏覽器將不會(huì)發(fā)出http請求，而是使用緩存的組件，減少了總體需要下載文件的大小。
綜合來講，我們一般推薦使用外置的js和css，不過這也要根據(jù)自身web的訪問場景以及PV做出最優(yōu)選擇。
