回流（reflow）与重绘（repaint）

“reflow和repaint是减缓JavaScript的三大主要原因之一”......

回流（reflow）这个名词指的是网路浏览器为了重新渲染部分或全部的文档而重新计算文档中元素的位置和几何结构的过程。

假如我使用JavaScript砍掉一个节点，这棵树为了不脱节，肯定要重新梳理一遍，将砍掉的那个断点重新结合起来又形成一颗完整的树，而这个结合梳理过程就是这里的reflow，所谓回流，就是由于某些原因（如修改），要将元素回过头来重新“流”一遍。

导致回流的原因：

1、调整窗口大小

2、改变字体

3、增加或者移除样式表

4、内容变化，比如用户在input框中输入文字

5、激活CSS伪类，比如：hover（IE中为兄弟结点伪类的激活）

6、操作class属性

7、脚本操作DOM

8、计算offsetWidth和offsetHeight属性

9、设置style属性的值

以下是一些简单的指导方针可以帮助你页面上的回流(reflow)减到最小：
1、减少不必要的DOM深度。因为无论你改变DOM节点树上任何一个层级都会影响节点树的每个层级——从根结点一直到修改的子节点。不必要的节点深度将导致执行回流时花费更多的时间。如果想设定元素的样式，通过改变元素的class名（尽可能在DOM树的最末端）
2、 精简css，去除没有用处的css
3、 如果你想让复杂的表现发生改变，例如动画效果，那么请在这个流动线之外实现它。使用position-absolute或position-fixed来实现它。
4、 避免不必要的复杂的css选择符，尤其是使用子选择器，或消耗更多的CPU去做选择器匹配。5、避免设置多项内联样式

6、避免使用table布局

7、避免使用CSS的javascript表达式（仅IE浏览器）

 

参考链接：《让网络更快一些——最小化浏览器中的回流》http://www.zhangxinxu.com/wordpress/?p=311