1、什么是重绘

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

2、什么是回流

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

3、重绘与回流的关系

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

4、哪些操作会导致重绘

• 只要是不触发回流，但又触发了样式改变的 DOM 操作，都会引起重绘。
• 比如背景色、文字色、可见性的修改(可见性这里特指如 visibility: hidden 这样不改变元素位置和存在性的，单纯针对可见性的操作，注意与 display:none 进行区分)等。

5、哪些操作会导致重绘

• 改变 DOM 元素的几何属性：

  • 当一个 DOM 元素的几何属性发生变化时，所有和它相关的节点（比如父子节点、兄弟节点等）的几何属性都需要进行重新计算，它会带来巨大的计算量。
  • 常见的几何属性有 width、height、padding、margin、left、top、border 等等。

• 改变 DOM 树的结构

  • 这里主要指的是节点的增减、移动等操作。

• 最容易被忽略的操作：获取一些特定属性的值

  • 当你要用到像这样的属性：offsetTop、offsetLeft、 offsetWidth、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight ，要注意这些值有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。