重排重绘的理解

页面的重绘（repaint）与重排（reflow，也有称回流）。页面渲染完成后，若JS操作了DOM节点，根据JS对DOM操作动作的大小，浏览器对页面进行重绘或是重排。

重绘（repaint） ：屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。

重排（reflow） ：也有称回流，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式："display:none;"。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即重排（reflow）。

注意： 重排必将引起重绘，而重绘不一定会引起重排。

何时回引起重排

当页面布局和几何属性改变时就需要重排。下述情况会发生浏览器重排：

1、添加或者删除可见的DOM元素；

2、元素位置改变——display、float、position、overflow等等；

3、元素尺寸改变——边距、填充、边框、宽度和高度

4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

5、页面渲染初始化；

6、浏览器窗口尺寸改变——resize事件发生时；

一般在我们的开发过程中，当DOM元素的操作不可避免时， 我们可以通过以下方式来尽量减少重绘与重排，重点是减少重排，主要的思路是， 将多次的DOM 操作合并为一次，或者使需要被操作的元素脱离文档流以减少浏览器重绘与重排的次数，下面的这些操作都是通过减少重排重绘来实现性能优化的：

      1.元素的多次样式修改合并成一次修改；

      2.如需进行对DOM节点进行多次操作，先将其脱离文本流之后再进行多次操作；

      3.table布局的渲染与普通DOM节点的操作相比，性能消耗更大，如果可以，尽量减少table布局的使用；

      4.缓存常用的布局信息；

      5.兼容IE时减少使用hover；

      6.动画使用window.requestAnimationFrame()，window.requestAnimationFrame() 这两个方法调节重新渲染；

      7.使用虚拟dom脚本库，例如react或者snabbdom等。