CSS文件放置在head中和放在body底部，對CSS本身的下載時間不會有影響，但對頁面的呈現(xiàn)有非常大的影響，與用戶體驗(yàn)密切相關(guān)。

CSS文件放在頂部的原理：

1) CSS的下載是按照其在文檔中出現(xiàn)的順序進(jìn)行的，所以很容易想到將不需立即使用的CSS，如彈出框CSS，放在底部，這似乎可以得到一個加載很快的頁面。然而這其實(shí)是錯誤的，IE8及以下瀏覽器的工作方式是：為了避免樣式變化導(dǎo)致頁面重繪or重排，會阻塞內(nèi)容呈現(xiàn)，在所有CSS加載并解析完之前不會呈現(xiàn)內(nèi)容，導(dǎo)致整個瀏覽器顯示空白，出現(xiàn)“白屏”（瀏覽器呈現(xiàn)過程：先出現(xiàn)白屏，后出現(xiàn)文字，圖片，最后出現(xiàn)樣式），直到CSS加載完畢。若在網(wǎng)速非常慢的情況下，CSS下載時間會特別長，導(dǎo)致瀏覽器“白屏”的時間很長，用戶體驗(yàn)會非常差。

2)將CSS放在底部，頁面可以逐步呈現(xiàn)，但在CSS下載并解析完畢后，已經(jīng)呈現(xiàn)的文字和圖片就要需要根據(jù)新的樣式重繪，這是一種不好的用戶體驗(yàn)。

測試實(shí)例：

將CSS文件放在頂部和放在底部，觀察Network中的Time比較頁面全部渲染完畢的用時長短。