原創(chuàng)作品，請勿抄襲月帝，翻版必究躏惋。轉(zhuǎn)載請注明作者。
簡介
在web頁面設計中嚷辅，一般在HTML中不直接寫樣式簿姨，而是通過link標簽引用一個CSS文件。在下載頁面過程中簸搞，document最早開始下載扁位，然后瀏覽器解析document，下載相關(guān)的css趁俊、js域仇、圖片、字體寺擂、視頻等資源暇务。css文件放置在head中和放在body底部泼掠，對css的下載時間不會有影響，但是對頁面的呈現(xiàn)有著非常大的影響垦细，與用戶的體驗密切相關(guān)择镇。
下面我們還是來看看天貓網(wǎng)站上的情況：
從天貓的首頁可以看出5個CSS文件全部都放在了head中。同樣括改，不僅僅只是在天貓如此腻豌，在國內(nèi)技術(shù)前沿的大型網(wǎng)站中，都是如此嘱能。
CSS文件放置在頂部的原理
CSS文件放在頂部一方面是因為放置順序決定了下載的優(yōu)先級吝梅，更關(guān)鍵的是瀏覽器的渲染機制。最理想的情況焰檩，我們希望瀏覽器逐漸的渲染下載好的CSS憔涉，將頁面逐漸的展現(xiàn)給用戶。但是瀏覽器為了避免樣式變化時重新渲染繪制頁面元素析苫，會阻塞內(nèi)容逐步呈現(xiàn)，瀏覽器等待所有樣式加載完成之后才一次性渲染呈現(xiàn)頁面穿扳。如此衩侥，CSS文件如果放置底部，瀏覽器阻止內(nèi)容逐步呈現(xiàn)矛物，瀏覽器在等待最后一個css文件下載完成的過程中茫死，就出現(xiàn)了“白屏”（新打開連接時為白屏，爾后先出現(xiàn)文字履羞，圖片峦萎，樣式最后出現(xiàn)）。這點非常嚴重忆首，因為在網(wǎng)速非常慢的情況下爱榔，css下載時間比較長，這樣就給用戶帶來“白屏”的時間自然也就很長了糙及，用戶體驗非常差详幽。
實際測試
為了延遲我本地環(huán)境的網(wǎng)速，我使用了Fiddler Web Debugger來模擬網(wǎng)速很慢的情況浸锨。打開Rules->Performance-Simulate Modems Speed就是啟用了網(wǎng)速延遲模擬唇聘，調(diào)節(jié)網(wǎng)速打開Rules->Customize Rules會打開一個js腳本，修改184行和186行調(diào)節(jié)網(wǎng)速柱搜。詳細的Fiddler使用可參考這篇博客迟郎。
在我的例子中，頂部一個css文件聪蘸，底部非常多的js文件宪肖，最后一個css文件表制，如下圖所示。bootstrap.css啟的作用是將圖片水平居中匈庭，oneui.min-1.5.css在頁面中啟的作用僅僅是將圖片垂直居中夫凸。
測試demo
放置在底部的情況1
在9.38秒時頂部一個樣式文件和圖片已經(jīng)加載完畢（網(wǎng)站一出現(xiàn)內(nèi)容我馬上截圖，誤差不超過0.5秒阱持，圖中也可以看出圖片還在渲染ing）夭拌。
放在底部的情況2
在15秒不到時，oneui.min-1.5.css已經(jīng)下載完畢衷咽，但卻在32秒處鸽扁，圖片才垂直居中（一居中我馬上截圖，誤差不超過0.5秒）镶骗。
上面可以看出放置頂部的樣式無需等待其他css桶现，js文件下載完才進行渲染。放置底部的樣式負責的頁面渲染需要等待其他所有js鼎姊，css下載完畢才進行骡和。
再做兩個實驗，一個是全部優(yōu)先放在頂部相寇，一個是全部放在最尾部慰于。
全部放在最頂部的情況
全部css放在頂部的情況，在15秒左右（同樣唤衫，我在頁面一出現(xiàn)時馬上截圖婆赠，誤差不超過0.5秒），頁面就全部渲染完畢佳励；
全部放在尾部在1.07秒時的情況
全部放在最尾部的情況
全部css放在尾部的情況休里，在27秒左右（同樣，我在頁面一出現(xiàn)時馬上截圖赃承，誤差不超過0.5秒）妙黍，頁面就全部渲染完畢；
上面可以看出css放在頂部楣导，頁面渲染的就快一些废境。放在尾部，就要等待所有css筒繁，js加載完成以后才能進行渲染噩凹。建議開發(fā)人員都參照此CSS文件放置頭部的規(guī)范。前端的性能優(yōu)化必須對這些細節(jié)非常注意毡咏，變量引起質(zhì)變驮宴，如果每個地方你都極盡最佳性能，你開發(fā)出來的網(wǎng)站性能將會尤其突出呕缭。
