1.首先需要了解的是页面渲染过程(如下图所示):
2.回流和重绘的概念:
回流:浏览器重新构建render tree的过程
重绘:浏览器根据render tree重新绘制界面的过程
3.引起回流的操作
当改变界面已有元素的位置,大小(width,height,border,padding,margin,content),或者新添加元素的时候,都会引起回流;每个页面至少有一次回流,也就是页面刚开始加载的时候
4.引起重绘的操作
- 当页面发生回流
- 当改变元素不影响布局的属性的的时候;如:颜色,
5.优化
浏览器实际上在会帮助我们做一些这方面的优化.它会维护一个队列,把所有引起回流,重绘的操作放入到这个队列,当到达一定的条件,浏览器就会对这个队列的所有操作进行一个批处理,这样就会让多次的回流,重绘变成一次回流重绘.
但是我们自身的操作有时候也会引起浏览器刷新整个队列.当要获取元素大小信息的时候,浏览器会为了提供最准确的值而去刷新队列
所以,我们自己能做的优化为:
- 针对一个node,如果有多个大小相关的样式需要改变,则尽量通过添加类名,csssText拼接;(尽量批量改变,而避免单个改变)
- a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘；
b) 使用display:none技术，只引发两次回流和重绘；
c) 使用cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘； - 尽量避免访问能够引起浏览器刷讯队列的属性,如果不能避免,则利用缓存
- 让元素脱离动画流