重排/回流与重绘

概念

重排

当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

重绘

当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变。重绘不一定重排，重排一定重绘。

如何触发

1. 添加、删除、更新DOM节点
2. 通过 display: none 隐藏一个DOM节点(隐藏元素并脱离文档流)-触发重排和重绘
3. 通过 visibility: hidden 隐藏一个DOM节点-只触发重绘，因为没有几何变化
   (opacity: 0隐藏元素，不触发回流重绘，会触发绑定事件)
4. 移动或者给页面中的DOM节点添加动画
5. 用户行为，例如调整窗口大小，改变字号，或者滚动

如何避免

1. 最小化重绘和重排，比如样式集中改变，使用添加新样式类名 .class 或 cssText
2. 批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中
3. 使用 absolute 或 fixed 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显
4. 开启 GPU 加速，利用 css 属性 transform 、will-change 等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘