重绘、回流

DOM性能 浏览器的性能大部分都是被这两个问题所消耗
重绘：
DOM树没有元素增加或删除，只是样式的改变，针对浏览器对某一元素进行单独的渲染，这个过程就叫做重绘
回流：
DOM树中的元素被增加或者删除，导致浏览器需要重新的去渲染整个DOM树，回流比重绘更消耗性能，发生回流必定重绘，重绘不一定会导致回流。

因为重绘和回流的存在导致真实DOM性能不佳，所以VUE和recat还有angular等框架增加了虚拟DOM技术，就是为了减少DOM的重绘和回流从而减少浏览器性能消耗，这就是虚拟DOM的好处。

***重排（重构/回流/reflow）***：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。

重绘和重排的关系：在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为重绘。

触发重排的条件：任何页面布局和几何属性的改变都会触发重排，比如：
　　1、页面渲染初始化；(无法避免)

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

3、元素位置的改变，或者使用动画；

4、元素尺寸的改变——大小，外边距，边框；

5、浏览器窗口尺寸的变化（resize事件发生时）；

6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；

7、读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height,　width/height,　getComputedStyle(),　currentStyle(IE)　)

当需要对DOM元素进行一系列操作，可以通过以下步骤来减少重绘和重排的次数：
1、使元素脱离文档流（重排）
2、对应用多重改变
3、把元素带回文档（重排）

有三种基本方法可以使DOM脱离文档流：
1、隐藏元素，应用修改，重新显示
2、使用文档片段在当前DOM之外构建一个子树，再把它拷贝回文档（推荐）
3、将原始元素拷贝到一个脱离文档的节点中，修改副本，完成后再替换原始元素。