2020-12-04

什么是回流，什么又是重绘呢？

回流：当我们对 DOM 的修改引发了 DOM 几何尺寸的变化（比如修改元素的宽、高或隐藏元素等）时，浏览器需要重新计算元素的几何属性（其他元素的几何属性和位置也会因此受到影响），然后再将计算的结果绘制出来。这个过程就是回流（也叫重排）。

重绘：当我们对 DOM 的修改导致了样式的变化、却并未影响其几何属性（比如修改了颜色或背景色）时，浏览器不需重新计算元素的几何属性、直接为该元素绘制新的样式（跳过了上图所示的回流环节）。这个过程叫做重绘。

由此我们可以看出，重绘不一定导致回流，回流一定会导致重绘。硬要比较的话，回流比重绘做的事情更多，带来的开销也更大。但这两个说到底都是吃性能的，所以都不是什么善茬。我们在开发中，要从代码层面出发，尽可能把回流和重绘的次数最小化。

那么什么情况下会产生回流呢？

1. 改变 DOM 树结构，比如添加或者删除可见的元素、改变文本内容、改变位置

2. 改变元素几何尺寸：边距、填充、边框、宽度和高度

3. 改变浏览器窗口尺寸

4. 伪类激活，在用户交互过程中发生

应该尽量减少回流和重绘，那么怎样优化浏览器渲染过程？

其实优化就是减少对render tree的操作，并减少对一些style信息的请求，尽量利用好浏览器的优化策略。

1. 不要1个1个改变元素的样式属性，最好直接改变className，但className是预先定义好的样式，不是动态的，如果你要动态改变一些样式，则使用cssText来改变

2. 让操作元素离线处理

即使用documentFragment或div等元素进行缓存操作，先把所有要添加到元素添加到1个div，最后才把这个div append到body中

先display:none 隐藏元素，然后对该元素进行所有的操作，最后再显示该元素。因对display:none的元素进行操作不会引起回流、重绘。

3. 将引起回流的属性赋值给变量，进行缓存，需要用到的时候直接使用变量就行

4. 减少操作影响的节点，影响的节点越多，则越消耗性能。

参考：https://github.com/tcatche/tcatche.github.io/issues/60