页面的回流(reflow)和重绘(repaintd)

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 技术，引发一次回流和重绘；
  
• 尽量避免访问能够引起浏览器刷讯队列的属性,如果不能避免,则利用缓存
• 让元素脱离动画流