如何减少重排和重绘

1.回流的触发条件

重排也叫做回流,

简单来说，就是当我们对 DOM 结构的修改引发 DOM 几何尺寸变化的时候，会发生回流的过程。

比如一下情况:

     1.一个DOM元素的几何属性变化，常见的几何属性有width,height,padding,margin,left,top...

     2.DOM节点发生增减或者移动

     3.读写offset族,scroll族属性的时候，浏览器为了获取这些值，需要回流操作

     4.调用window.getComputedStyle方法

2.回流过程

触发回流的时候，如果 DOM 结构发生改变，则重新渲染 DOM 树，然后将后面的流程(包括主线程之外的任务)全部走一遍。

3.重绘的触发

当 DOM 的修改导致了样式的变化，并且没有影响几何属性的时候，会导致重绘(repaint)。

4.避免回流

1.一个 DOM 元素的几何属性变化，常见的几何属性有width、height、padding、margin、left、top、border 等等。

2.使 DOM 节点发生增减或者移动。

3. 读写 offset族、scroll族和client族属性的时候，浏览器为了获取这些值，需要进行回流操作。

4.调用 window.getComputedStyle 方法。

5.避免重绘

1. 避免频繁使用 style，而是采用修改class的方式。
2.使用createDocumentFragment进行批量的 DOM 操作。
3.对于 resize、scroll 等进行防抖/节流处理。
4.添加 will-change: tranform ，让渲染引擎为其单独实现一个图层，当这些变换发生时，仅仅只是利用合成线程去处理这些变换，而不牵扯到主线程，大大提高渲染效率。当然这个变化不限于tranform, 任何可以实现合成效果的 CSS 属性都能用will-change来声明。