重绘和回流

渲染优化–重绘和回流

回流和重绘

• 回流（重排）：重新触发一次布局。当渲染树中元素的位置、大小、尺寸等几何信息发生改变，需要重新计算节点的大小和位置。
• 重绘：节点的样式发生改变，不会涉及几何信息，会重新绘制到浏览器。重新触发绘制。
  回流一定发生重绘，重绘不一定发生回流。

回流的触发时机

• DOM节点的几何属性发生变化
• DOM树的结构发生改变。新增或者修改DOM树的节点
• 获取特定的属性，offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollxxx、clientxxx，这些属性的获取需要页面进行一次布局，以便获得最新的属性值。
• window.getComputedStyle(Dom Element)方法。

回流优化

• GPU硬件加速
  开启GPU加速实际上是合成阶段的加速，合成阶段将不同的图层合成在一起，不同的图层的布局和绘制互不影响。（本质是开启了新的图层）

开启方法：与GPU有关的属性transform、opacity。
用transform代替top，left ，margin-top， margin-left等位移属性。
用opacity 代替 visibility，但是要同时有translate3d 或 translateZ 这些可以创建的图层的属性存在才可以阻止回流。
补充知识：用visibility只会触发重绘不会触发回流，可以用visibility代替display属性对节点进行隐藏。

transform不会触发回流和重绘

• JS优化