js- 重绘和回流

[wolichuang]

1. 回流:引起Dom树结构变化，页面布局变化的行为

2. 重绘:只是样式改变，不会引起Dom树变化，页面布局变化的行为

3. 回流必定引起重绘，但重绘不一定会伴随回流

如何优化代码减少回流重绘过程?

主要思想就是减少对Dom树的操作次数和减少一些具有影响性的样式请求

1.合并多次对样式的修改，如改变className

2.动态改变样式时使用cssText

3.将要改变的元素节点，先隐藏掉，改变后再显示

4.元素节点本身是处于隐藏状态，通过cloneNode或者replaceChild将其展示，原理与第3点相同

5.不要经常访问会引起浏览器flush队列的属性，如要确要访问，使用缓存即可

6.让元素脱离动画流，减少render树的规模

7.牺牲平滑度来换取速度

8.避免使用table布局

9.IE中避免使用Javascript表达式