什么是回流和重绘
何时发生回流 (Reflow)？
当影响浏览器渲染页面当中的布局这个步骤的时候，会引发回流，即整个页面可能因为一个节点的大小变化，而触发整个页面的回流，例如改变width、height、font-size
当一个元素的长与宽改变，可能会影响到画面中其他元素的编排，所以每当有一个元素的布局改变，浏览器的 CPU 需要重新计算整个页面中不同元素的长宽、间距等。在计算的期间，会没办法处理起他任务 (例如使用者在点击按钮，可能会要等一阵子才有回应，因为浏览器无暇处理)。
这也是为什么，回流对效能的影响，往往比重绘来得大。
何时发生重绘 (Repaint)
当页面上的某个元素需要改变颜色或其他不影响布局的属性时，浏览器会对其进行重绘 (repaint)。与回流不同，重绘不会影响页面布局，但是也会影响页面的性能。例如：改变 outline、visibility、color、background-color等。
如何减少回流以及重绘
在浏览器渲染过程中最后一步骤是合成 (compositing)，在某些情况，我们可以透过一些技巧只需要让浏览器合成 (compositing)，而避免回流 (Reflow) 和重绘 (Repaint)。
以下提供几个方法:
- 移动调整元素时，使用
transform - 使用
opacity来改变元素的能见度 - 如果需要频繁重绘或回流的节点，可以透过
will-change设定成独立的图层，因为独立的图层可以避免该节点渲染行为影像到其他节点。哪些css属性会创建新的层叠上下文body > .sidebar { will-change: transform; } - 避免频繁用 JavaScript 操作 DOM 节点