浏览器如何加载CSS的
1.当浏览器获得一个html页面时，会“自上而下”加载解析，解析完成之后会生成DOM TREE
DOM树由DOM元素和属性节点组成。DOM是文档对象模型（Document Object Model）的缩写，是HTML文档的对象表示形式。
我们通过一个html文件来具体分析
xml
复制代码
<html>
<head>
<meta charset="UTF-8" />
<title>how css works</title>
<style>
h1 {
color: red;
}
p {
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<h1>Hello World</h1>
<p>This is a test</p>
</div>
</body>
</html>
他的DOM Tree就大致如下图所示：
2.上面构建了DOM树，但没有包含节点的样式信息。但是浏览器时无法直接理解css代码的，所以会先通过css文件转化为浏览器可以理解的cssom树。
注意，DOM Tree与CSSOM Tree并没有严格的先后生成顺序，浏览器在构建 DOM 树的同时，如果样式也加载完成了，那么 CSSOM 树也会同步构建
我们写一点CSS代码，看会生成怎样的CSSOM树。
css
复制代码
h1 {
color: red;
}
p {
margin-top: 20px;
}
对应的树结构：
3.接下来便是构建渲染树，使可见的元素得以被渲染在网页上。
那为什么要构建渲染树呢？在上面的示例中可以看到，DOM树可能包含一些不可见的元素，比如head标签，使用display:none;属性的元素等。所以在显示页面之前，还要额外地构建一棵只包含可见元素的渲染树。
4.接下来便是根据渲染树进行页面元素的布局（对渲染树进行分层，生成分层树，类似于ps，生成一个个图层），然后合成绘制成一个完整页面。
5.接下来对于网页的修改会引发网页的重排与重绘。简单来说就是，涉及到DOM树中元素几何尺寸的变化会引发重排，这种方式开销比较大。其他不影响集合尺寸例如修改颜色会引发重绘，执行效率相对高些。
