回流:引起Dom树结构变化,页面布局变化的行为
重绘:只是样式改变,不会引起Dom树变化,页面布局变化的行为
1.回流必定引起重绘,但重绘不一定会伴随回流
如何优化代码减少回流重绘过程
主要思想就是减少对Dom树的操作次数和减少一些具有影响性的样式请求
1.合并多次对样式的修改,如改变className
2.动态改变样式时使用cssText
3.将要改变的元素节点,先隐藏掉,改变后再显示
4.元素节点本身是处于隐藏状态,通过cloneNode或者replaceChild将其展示,原理与第3点相同
5.不要经常访问会引起浏览器flush队列的属性,如要确要访问,使用缓存即可
6.让元素脱离动画流,减少render树的规模
7.牺牲平滑度来换取速度
8.避免使用table布局
9.IE中避免使用Javascript表达式