CSS的工作流程

CSS的工作流程

1. 浏览器载入HTML文件。
2. 将HTML文件转化成一个DOM。
3. 浏览器拉取HTML的大部分资源。
4. 浏览器拉取到CSS之后会进行解析，浏览器基于选择器的不同类型找到不同的选择器，将不同的规则应用在对应的DOM节点中，并添加节点的依赖样式——渲染树。
5. 渲染树依照应该出现的结构进行布局。
6. 网页展示——着色。

CSS工作流程图：

HTML转化成DOM

HTML代码：

<p>
	HTML
	<span>转化成</span>
	<span>DOM</span>
</p>

DOM结构：

P
├─ "HTML"
├─ span
|     └─ "转化成"
├─ span
      └─ "DOM"

在这个DOM结构中，

元素对应了父节点，它的子节点是一个text节点和两个元素节点，span节点同时也是其text节点的父节点。