回流与重绘

浏览器渲染过程

1. 解析HTML生成DOM树。
2. 解析CSS生成CSSOM规则树。
3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
4. 遍历渲染树开始布局，计算每个节点的位置大小信息。
5. 将渲染树每个节点绘制到屏幕。

回流(reflow): 当浏览器发现某个部分发生了变化影响了布局(某个元素的显示与隐藏,宽度高度的改变)，需要重新渲染。也就是会导致浏览器重新生成渲染树，reflow 会从根节点开始递归往下，依次计算所有的结点几何尺寸和位置。

重绘(repaint): 改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，会发生重绘，重绘简单的说就是重新绘制，将渲染树每个节点绘制到屏幕上。

不同点: 回流一定会重绘，而重绘不一定会引起回流

注意点

1. display:none 会触发 reflow，而 visibility:hidden 只会触发 repaint，因为没有发生位置变化。
2. 有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。
3. 有些情况下，比如 resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。
4. 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘
5. 对于动画的其它属性，比如background-color这些，还是会引起回流重绘的，不过它还是可以提升这些动画的性能。

如何减少重排重绘？

1. 用 JavaScript 修改样式时，最好不要直接写样式，而是替换 class 来改变样式(合并多次对DOM和样式的修改，然后一次性修改)。
2. 如果要对 DOM 元素执行一系列操作，可以将 DOM 元素脱离文档流，修改完成后，再将它带回文档。
3. 对于复杂动画效果,使用绝对定位让其脱离文档流

参考链接：https://segmentfault.com/a/1190000017329980