减少reflow与repaint的一些优秀实践

下面是一些比较好的实践：

1. 不要一条一条地修改DOM的样式。

与其这样，还不如预先定义好css的class，然后修改DOM的className。

// bad
var left = 10,
top = 10;
el.style.left = left + "px";
el.style.top  = top  + "px";
// Good
el.className += " theclassname";
// Good
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

2. 把DOM离线后修改。

使用 documentFragment 对象在内存里操作DOM。

先把DOM给display:none(有一次reflow)，然后你想怎么改就怎么改。比如修改100次，然后再把他显示出来。

clone一个DOM结点到内存里，然后想怎么改就怎么改，改完后，和在线的那个的交换一下。

3. 不要把DOM结点的属性值放在一个循环里当成循环里的变量。不然这会导致大量地读写这个结点的属性。

4. 尽可能的修改层级比较低的DOM。当然，改变层级比较底的DOM有可能会造成大面积的 reflow，但是也可能影响范围很小。

5. 为动画的HTML元件使用fixed或absoult的position，那么修改他们的CSS是不会reflow的。

6. 最好不要使用table布局。因为可能很小的一个小改动会造成整个table的重新布局。

In this manner, the user agent can begin to lay out the table once the entire first row has been received. Cells in subsequent rows do not affect column widths. Any cell that has content that overflows uses the ‘overflow’ property to determine whether to clip the overflow content.

用这种方式，当第一行收到的时候客户端就可以马上开始布局表格。之后的行不会影响列的宽度。任何有内容溢出的单元格使用 overflow 属性去判断时候要剪裁掉那些溢出的内容。（自翻，渣翻译……）

FIXED LAYOUT, CSS 2.1 SPECIFICATION

This algorithm may be inefficient since it requires the user agent to have access to all the content in the table before determining the final layout and may demand more than one pass.

这个算法可能会比较低效，因为他需要客户端必须收到所有表格中的内容才能够布局，并且可以要求多次传递数据。

AUTOMATIC LAYOUT, CSS 2.1 SPECIFICATION