重绘和回流（repaint&reflow）

重绘

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如outline, visibility, color、background-color等，重绘的代价是高昂的，因为浏览器必须验证DOM树上其他节点元素的可见性。

回流

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。
大部分的回流将导致页面的重新渲染。
回流必定会发生重绘，重绘不一定会引发回流。

如何减少重绘与回流

1. CSS

   • 使用 transform 替代 top
   • 使用 visibility 替换 display: none ，前者引起重绘，后者引发回流
   • 避免使用table布局
   • 尽可能在DOM树的最末端改变class
   • 避免设置多层内联样式
   • 将动画效果应用到position属性为absolute或fixed的元素上，避免影响其他元素的布局，这样只是一个重绘，而不是回流
   • 避免使用CSS表达式，可能会引发回流。
   • 将频繁重绘或者回流的节点设置为图层
   • CSS3 硬件加速（GPU加速）

2. JavaScript

   • 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。
   • 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。
   • 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。
   • 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

参考链接：
https://github.com/chenjigeng/blog/issues/4
https://github.com/sisterAn/blog/issues/33