浅谈前端性能优化（三）——将CSS文件放在顶部

CSS文件放置在head中和放在body底部，对CSS本身的下载时间不会有影响，但对页面的呈现有非常大的影响，与用户体验密切相关。

 

CSS文件放在顶部的原理：

1) CSS的下载是按照其在文档中出现的顺序进行的，所以很容易想到将不需立即使用的CSS，如弹出框CSS，放在底部，这似乎可以得到一个加载很快的页面。然而这其实是错误的，IE8及以下浏览器的工作方式是：为了避免样式变化导致页面重绘or重排，会阻塞内容呈现，在所有CSS加载并解析完之前不会呈现内容，导致整个浏览器显示空白，出现“白屏”（浏览器呈现过程：先出现白屏，后出现文字，图片，最后出现样式），直到CSS加载完毕。若在网速非常慢的情况下，CSS下载时间会特别长，导致浏览器“白屏”的时间很长，用户体验会非常差。

2)将CSS放在底部，页面可以逐步呈现，但在CSS下载并解析完毕后，已经呈现的文字和图片就要需要根据新的样式重绘，这是一种不好的用户体验。

 

测试实例：

将CSS文件放在顶部和放在底部，观察Network中的Time比较页面全部渲染完毕的用时长短。