前端性能优化—将CSS文件放在顶部

2022-11-29 11:11:24 浏览数 (1)

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

CSS文件放在顶部的原理:

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

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

测试实例:

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

css

0 人点赞