CSS文件放置在head中和放在body底部，對CSS本身的下載時(shí)間不會(huì)有影響，但對頁面的呈現(xiàn)有非常大的影響，與用戶體驗(yàn)密切相關(guān)。
CSS文件放在頂部的原理：
1) CSS的下載是按照其在文檔中出現(xiàn)的順序進(jìn)行的，所以很容易想到將不需立即使用的CSS，如彈出框CSS，放在底部，這似乎可以得到一個(gè)加載很快的頁面。然而這其實(shí)是錯(cuò)誤的，IE8及以下瀏覽器的工作方式是：為了避免樣式變化導(dǎo)致頁面重繪or重排，會(huì)阻塞內(nèi)容呈現(xiàn)，在所有CSS加載并解析完之前不會(huì)呈現(xiàn)內(nèi)容，導(dǎo)致整個(gè)瀏覽器顯示空白，出現(xiàn)“白屏”（瀏覽器呈現(xiàn)過程：先出現(xiàn)白屏，后出現(xiàn)文字，圖片，最后出現(xiàn)樣式），直到CSS加載完畢。若在網(wǎng)速非常慢的情況下，CSS下載時(shí)間會(huì)特別長，導(dǎo)致瀏覽器“白屏”的時(shí)間很長，用戶體驗(yàn)會(huì)非常差。
2)將CSS放在底部，頁面可以逐步呈現(xiàn)，但在CSS下載并解析完畢后，已經(jīng)呈現(xiàn)的文字和圖片就要需要根據(jù)新的樣式重繪，這是一種不好的用戶體驗(yàn)。
測試實(shí)例：
將CSS文件放在頂部和放在底部，觀察Network中的Time比較頁面全部渲染完畢的用時(shí)長短。
