css样式表性能优化

悬赏园豆：5 [已解决问题] 解决于 2018-02-11 16:26

css样式表放在头部，js放在尾部可以达到性能优化的一个目的

但是css样式表放在头部能达到这样一个效果的原理是什么呢？

性能优化

改吧 | 初学一级 | 园豆：104
提问于：2018-02-09 10:11

< >

最佳答案

这样会先加载css的样式，在渲染dom的时候已经知道了自己的样式了，所以一次渲染成功

如果css放在底部，那么需要先渲染dom，然后加载css后会重新渲染之前dom，需要两次渲染

收获园豆：5

刘宏玺 | 专家六级 |园豆：14020 | 2018-02-09 10:14

好的谢谢

改吧 | 园豆：104 (初学一级) | 2018-02-11 16:26

但是为什么css放在尾部的时候加载css会重新加载一次dom呢

改吧 | 园豆：104 (初学一级) | 2018-02-11 16:29

其他回答(2)

文档加载顺序，js操作dom，阻塞dom加载，现在浏览器为了更好的用户体验，渲染引擎会尝试尽快在屏幕上显示内容，它不会等到所有的HTMl元素解析之后在构建和布局dom树，所以部分内容将被解析并显示。也就是说浏览器能够渲染不完整的dom

liangzai1996 | 园豆：135 (初学一级) | 2018-02-09 10:19

如果css放在尾端你就需要游览器执行2倍的渲染工作！~~~

blurs | 园豆：660 (小虾三级) | 2018-02-09 11:31

清除回答草稿

您需要登录以后才能回答，未注册用户请先注册。

欢迎，请先 登录 或者 注册 。