css深入浅出系列只是自己在学习css的时候的一些个人见解，有错误的地方，欢迎在评论中指正噢~
我们可以看到，大多数的html页面在用link引入外部css文件的时候，都是把css文件放在页面的顶部，即放在<head>标签里面，那么，这样做的原因是什么呢？
答案：可以让前端性能更优化
那么，为什么就可以让前端性能更加优化呢？这时，我们就需要先了解脚本和样式文件对页面渲染的影响。
浏览器从服务器获取文档并自上而下进行解析，在脚本文件不包含defer和async的情况下，会按照如下的规则进行解析：
1.解析hrml文档，遇到html标签时，构建DOM树
2.在解析html文档的时候，如果遇到外联的css文件或js文件，会阻塞html文档继续向下解析。
3.css文件下载完毕之后，会构建 CSS Rule Tree，js文件下载完毕之后，会立即解析执行。
4.如果CSS Rule Tree先于DOM Tree生成，那么DOM Tree会在一边构建的同时一边结合CSS Rule Tree生成Rendering Tree(渲染树)，渲染页面。
5.如果CSS Rule Tree后于DOM Tree生成，那么在构建完DOM Tree之后，会再结合CSS Rule Tree树，再次构建一遍，渲染页面。
从上面的规则中我们可以看到，我们css文件放在顶部，就可以先于DOM树生成CSS Rule Tree，DOM Tree就只会构建一遍，节省了时间，前端性能就得到优化。
当然，这个用法并不是绝对的，如果css文件比较大，下载时间较长，屏幕就会出现较长的白屏时间，用户体验不好。
扫一扫
1941
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
