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

?

CSS文件放在頂部的原理：

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

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

?

測試實例：

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

總結

以上是生活随笔為你收集整理的前端性能优化—将CSS文件放在顶部的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。