| 改样式
引用:
1. 尽可能少的修改元素style上的属性
2. 尽量通过修改className来修改样式
3. 通过cssText属性来设置样式值
3. 缓存Layout属性值
引用:
对于Layout属性中非引用类型的值（数字型），如果需要多次访问则可以在一次访问时先存储到局部变量中，之后都使用局部变量，这样可以避免每次读取属性时造成浏览器的渲染。
4. 设置元素的position为absolute或fixed
引用:
在元素的position为static和relative时，元素处于DOM树结构当中，当对元素的某个操作需要重新渲染时，浏览器会渲染整个页 面。将元素的position设置为absolute和fixed可以使元素从DOM树结构中脱离出来独立的存在，而浏览器在需要渲染时只需要渲染该元素 以及位于该元素下方的元素，从而在某种程度上缩短浏览器渲染时间，这在当今越来越多的Javascript动画方面尤其值得考虑。
5. 权衡速度的平滑
引用:
比如实现一个动画，以1个像素为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。
6. 不要用tables布局
引用:
不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素 reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围
7. 不要在css里面写expression
引用:
很多情况下都会触发reflow，如果css里有expression，每次都会重新计算一遍
参考文章：
1. 如何减少浏览器repaint和reflow
2. Repaint, reflow/relayout, restyle
3. Reflows & Repaints: CSS Performance making your JavaScript slow?
4. Repaint 跟踪浏览器的渲染[如果你的FF是3.5beta+监听网页的重绘情况]
|
