前言：浏览器的渲染过程

大部分的浏览器渲染过程如下图所示：

1. 浏览器把HTML源代码解析，并且创建一个DOM树（DOM tree）-每个HTML标签在这个树上都有一个对应的节点。
2. 浏览器解析CSS代码，被css解析器解析成CSSOM Tree。
3. DOM Tree和CSSOM Tree解析完成后，被附加到一起，形成渲染树（Render Tree）。
4. 一旦 渲染树构造完毕，浏览器就可以显示（绘制paint）页面上的元素了。

重排和重绘的概念

当 DOM 改变影响到元素的几何属性（宽和高），例如改变了边框宽度或在段落中添加文字，将发生一系列后续动作，浏览器需要重新计算元素的几何属性，而且其他元素的几何属性和位置也会因此改变受到影响。浏览器使渲染树上受到影响的部分失效，然后重新构造渲染树。这个过程被称作重排（reflow）。重排完成时，浏览器会重新绘制屏幕上受影响的部分，这个过程被称作重绘（repaint）

注意：不是所有的 DOM 改变都会影响几何属性。例如，改变一个元素的背景颜色不会影响它的宽度或高度。在这种情况下，只需要重绘（不需要重排），因为元素的布局没有改变。

什么时候发生重排？

• 添加或删除可见的 DOM 元素
• 元素位置改变
• 元素尺寸改变（因为边距，填充，边框宽度，宽度，高度等属性改变）
• 内容改变，例如，文本改变或图片被另一个不同尺寸的所替代
• 页面渲染初始化
• 浏览器窗口改变尺寸

如何减少重排和重绘？

1. 从文档流中摘除该元素
2. 对其应用多重改变
3. 将元素带回文档中

此过程引发两次重排版——第一步引发一次，第三步引发一次。如果忽略了这两个步骤，那么第二步中每次改变都将引发一次重排版。

有三种基本方法可以将 DOM 从文档中摘除：
1. 隐藏元素，进行修改，然后再显示它。
2. 使用一个文档片断在已存 DOM 之外创建一个子树，然后将它拷贝到文档中。

var fragment = document.createDocumentFragment()

3 . 将原始元素拷贝到一个脱离文档的节点中，修改副本，然后覆盖原始元素。

var oldNode = document.getElementById('XXX');
var newNode = oldNode.cloneNode(true);