浏览器的回流，重绘

[lznbuild]

先看一下一个简易版的浏览器渲染流程。

js=> style => layout => paint => composite(合成)

重绘(repaint)

浏览器的重绘直接绘制修改部分，跳过了layout部分。

回流（reflow）

浏览器的回流需要重新计算每个dom节点的位置大小等信息，需要layout。

transfrom，position:fixed，opacity，will-change，filter这种开启硬件加速的就是跳过layout,paint部分，直接到GPU进程中composite。

很明显重绘的开销比回流要小。

引起回流的操作(reflow)

• 页面初次渲染（无法避免）

• width/height/border/margin/padding,包括修改字体等需要重新计算，重新布局的样式修改。

• 动画，hover 等伪类引起的元素表现改动，display=none 等造成页面回流；

• appendChild 等 DOM 元素操作；

• scroll 页面，这个不可避免；

• resize 页面，桌面版本的进行浏览器大小的缩放

• 读取元素的属性：读取元素的某些属性（offsetLeft、offsetTop、offsetHeight、offsetWidth、scrollTop/Left/Width/Height、clientTop/Left/Width/Height、getComputedStyle()、currentStyle(in IE))，需要浏览器回流，获取当下最新的这些属性值。

如何避免回流

• 尽可能在 DOM 通过改变 class 来统一修改元素的 style 属性

• 尽可能的减少受影响的 DOM 元素。

• 设置动画元素 position 属性为 fixed 或者 absolute：由于当前元素从 DOM 流中独立出来，因此受影响的只有当前元素 ，或者直接通过transform属性做硬件加速。

• 避免在 CSS 动画中中使用运算式：calc(),这个的后果确实非常严重，一旦存在动画性的 repaint/reflow，那么每一帧动画都会进行计算，性能消耗不容小觑。

• 这个属性能够开启 GPU 加速页面渲染，从而大大降低了 CPU 的负载压力，达到优化页面渲染性能的目的。

  will-change: transform;