对于页面，我们经常有CSS对网页进行呈现样式效果，这就涉及到了页面的重绘和重排

重绘(repaints)与重排(reflows，也称回流)。

首先来了解一下页面的呈现流程，页面是如何将HTML和CSS结合等显示在浏览器上的

步骤：

1 浏览器将HTML代码解析成一个DOM树，HTML中的每一个标签都对应这个DOM树中的一个节点，根节点就是我们常用的document对象，DOM树包含了HTML代码中的所有标签，当然注释掉的不算，包括了display:none隐藏的标签，JS动态添加的也包括了

2 浏览器将所有的样式（定义的CSS和用户代理的）解析成样式结构体，解析过程中会去掉浏览器不能识别的样式，比如IE去掉了-moz开头的样式（FF对应的前缀），FF去掉_开头的样式（IE6的样式写法，可以见css hack一文）

3 DOM树和样式结构体组合构建一个Render Tree，称为呈现树，这个Render Tree结构类似于DOM树，但是它能识别样式，每一个节点node都有自己的样式style，但是此时Render Tree就不会包括那些隐藏的节点了（如display：none的节点和head节点），因为这些节点不呈现，也不影响呈现。但是visibility：hidden还是会在呈现树上，因为其仅仅是视觉上的隐藏，会影响布局，占有空间，而根据CSS2的标准，每一个Render Tree的节点都称为Box，符合盒子模型，拥有填充，边距，边框，位置的盒子

4 构建呈现树完成后，浏览器就根据其来绘制页面了。

回流和重绘

1. 当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

2. 当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘。

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

回流何时发生：

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

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

2、元素位置改变；

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

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

5、页面渲染初始化；

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

影响回流重绘的例子：

说到这里大家都知道回流比重绘的代价要更高，回流的花销跟render tree有多少节点需要重新构建有关系，假设你直接操作body，比如在body最前面插入1个元素，会导致整个render tree回流，这样代价当然会比较高，但如果是指body后面插入1个元素，则不会影响前面元素的回流

聪明的浏览器

很多浏览器会优化一些操作，浏览器会维护一个队列，把所有会引起回流、重绘的操作放入队列中，等队列的操作达到一定的数量或者到了一定的时间间隔，浏览器会flush队列，进行一个批处理，这样就让多次的回流重绘变成一次回流重绘

但是有时候我们写的一些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，比如：

1. offsetTop, offsetLeft, offsetWidth, offsetHeight

2. scrollTop/Left/Width/Height

3. clientTop/Left/Width/Height

4. width,height

5. 请求了getComputedStyle(), 或者 IE的 currentStyle

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，浏览器都会强行刷新渲染队列。

如何减少回流、重绘

减少回流、重绘其实就是需要减少对render tree的操作（合并多次多DOM和样式的修改），并减少对一些style信息的请求，尽量利用好浏览器的优化策略。具体方法有：

1. 直接改变className，如果动态改变样式，则使用cssText（考虑没有优化的浏览器）

2. 让要操作的元素进行”离线处理”，处理完后一起更新

a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；

b) 使用display:none技术，只引发两次回流和重绘；

c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；

3.不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存

4. 让元素脱离动画流，减少回流的Render Tree的规模

来源于：http://www.css88.com/archives/4996