CSS的工作流程
- 浏览器载入HTML文件。
- 将HTML文件转化成一个DOM。
- 浏览器拉取HTML的大部分资源。
- 浏览器拉取到CSS之后会进行解析,浏览器基于选择器的不同类型找到不同的选择器,将不同的规则应用在对应的DOM节点中,并添加节点的依赖样式——渲染树。
- 渲染树依照应该出现的结构进行布局。
- 网页展示——着色。
CSS工作流程图:
HTML转化成DOM
HTML代码:
<p>HTML<span>转化成</span><span>DOM</span></p>
DOM结构:
P├─ \"HTML\"├─ span| └─ \"转化成\"├─ span└─ \"DOM\"
在这个DOM结构中,
元素对应了父节点,它的子节点是一个text节点和两个元素节点,span节点同时也是其text节点的父节点。