浏览器
- 1.浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree
- 2.与此同时，进行CSS解析，生成Style Rules
- 3.接着将DOM Tree与Style Rules合成为 Render Tree
- 4.接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标
- 5.随后调用GPU进行绘制（Paint），遍历Render Tree的节点，并将元素呈现出来
Webkit 流程示意图
浏览器会『从右往左』解析CSS选择器。
DOM Tree与Style Rules合成为 Render Tree，实际上是需要将Style Rules附着到DOM Tree上，因此需要根据选择器提供的信息对DOM Tree进行遍历，才能将样式附着到对应的DOM元素上。
.mod-nav h3 span {font-size: 16px;}
对应的DOM Tree
从右至左的匹配过程是：
- 1.先找到所有的最右节点 span，对于每一个 span，向上寻找节点 h3
- 2.由 h3再向上寻找 class=mod-nav 的节点
- 3.最后找到根元素 html 则结束这个分支的遍历。
- 1.转码: 浏览器将接收到的二进制数据按照指定编码格式转化为HTML字符串
- 2.生成Tokens: 之后开始parser，浏览器会将HTML字符串解析成Tokens
- 3.构建Nodes: 对Node添加特定的属性，通过指针确定 Node 的父、子、兄弟关系和所属 treeScope
- 4.生成DOM Tree: 通过node包含的指针确定的关系构建出DOM Tree
- 重排: 部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素
- 重绘: 由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变
单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
任何改变用来构建渲染树的信息都会导致一次重排或重绘：
- 添加、删除、更新DOM节点
- 通过display: none隐藏一个DOM节点-触发重排和重绘
- 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
- 移动或者给页面中的DOM节点添加动画
- 添加一个样式表，调整样式属性
- 用户行为，例如调整窗口大小，改变字号，或者滚动。
- 查询某些属性或调用某些方法。比如说：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
- 1.集中改变样式
- 2.使用DocumentFragment
- 3.提升为合成层
最近更新 3yr ago