* 解析HTML，生成DOM树 * 解析CSS，生成CSSOM树 * 将DOM树和CSSOM树结合，生成渲染树(Render Tree) * **Layout(回流)**：根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小） * **Painting(重绘)**：根据渲染树以及回流得到的几何信息，得到节点的绝对像素 * Display：将像素发送给GPU，展示在页面上。 ## 触发回流 （回流一定会触发重绘） * 删除 dom 元素 * 元素的位置、尺寸、内容发生变化 * 浏览器窗口发生变化 ## 触发重绘 * 元素样式的改变，并不影响元素的位置时 ## 如何避免 首先浏览器自己会对频繁的回流和重绘进行优化 - 批处理 * `clientWidth`、`clientHeight`、`clientTop`、`clientLeft` * `offsetWidth`、`offsetHeight`、`offsetTop`、`offsetLeft` * `scrollWidth`、`scrollHeight`、`scrollTop`、`scrollLeft` * `width`、`height` * `getComputedStyle()` * `getBoundingClientRect()` 这些值会打破批处理的逻辑 ### css * 将动画效果应用到`position`属性为`absolute`或`fixed`的元素上 * 避免使用CSS表达式（例如：`calc()`） * 使用 transform translate ### js * 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性 * 避免频繁操作DOM，创建一个`documentFragment`，在它上面应用所有DOM操作，最后再把它添加到文档中 * 也可以先为元素设置`display: none`，操作结束后再把它显示出来 * 避免频繁读取会引发回流/重绘的属性，缓存变量 避免频繁读取 * 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流