[学习笔记]浏览器渲染过程及重绘重排知识

阅读文章：
https://juejin.im/post/5c0f104551882509a7683d63

浏览器渲染过程

1. 解析HTML，生成DOM树
2. 解析CSS，生成CSSOM树
3. 将DOM树和CSSOM树结合，生成渲染树(Render Tree)
4. Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）
5. Painting(重绘):根据渲染树以及回流得到的几何信息，得到节点的绝对像素
6. Display:将像素发送给GPU，展示在页面上。

回流一定会触发重绘，而重绘不一定会回流

如何减少回流和重绘

• 最小化重绘和重排： 减少重绘和重排发生的次数，合并多次对DOM和样式的修改，如通过修改CSS的class

• 批量修改DOM： 可采用隐藏元素，应用修改，重新显示；使用文档片段(document fragment)在当前DOM之外构建一个子树，再把它拷贝回文档；将原始元素拷贝到一个脱离文档的节点中，修改节点后，再替换原始的元素。

• 避免触发同步布局事件 访问元素的一些属性的时候，会导致浏览器强制清空队列，进行强制同步布局。

• 对于复杂动画效果,使用绝对定位让其脱离文档流

• css3硬件加速（GPU加速）
  使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
  对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

常见的触发硬件加速的css属性：
transform
opacity
filters
Will-change

css3硬件加速的问题
太多元素使用css3硬件加速，会导致内存占用较大，会有性能问题。
在GPU渲染字体会导致抗锯齿无效。这是因为GPU和CPU的算法不同。因此如果你不在动画结束的时候关闭硬件加速，会产生字体模糊。