重绘 、回流

重绘 、回流

首先了解页面的呈现流程

1. 浏览器把获取到的HTML代码解析成一个DOM树，HTML中的每个tag都是DOM树的1个节点，根节点就是document对象（html tag）。用firebug或者IE Develop Toolbar等工具可看到DOM树，包括display:none隐藏，还有js动态添加的元素；
2. 浏览器把所有样式（主要包括css和浏览器的样式设置）解析成样式结构体。在解析过程中会去掉浏览器不能识别的样式，比如IE会去掉-moz开头的样式，Firefox会去掉_开头的样式；
3. DOM tree 和样式结构体结合后构建呈现树（render tree）。render tree中每个node都有自己的style，而render tree不包含隐藏的节点（比如display:none的节点，还有head节点），这些节点不会用于呈现，也不影响呈现，所以就不会包含在render tree中。（visibility:hidden隐藏的元素还会包含在render tree中，因为会影响布局（layout），会占有空间。根据CSS2的标准，render tree中的每个节点都称为box（Box dimensions），box的所有属性：width,height,margin,padding,left,top,border等；
4. render tree构建完毕后，浏览器根据render tree来绘制页面。

重绘与回流的特征

1. 当render tree中的一些元素的外观、风格等不会影响布局的属性改变，比如bachground-color，这就称为重绘。
2. 当render tree中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就称为回流。每个页面在第一次加载的时候就回流了一次。

注：重绘不一定会引起回流，回流一定引起重绘。任何对render tree中元素的操作都会引起回流或重绘。

如何减少回流、重绘

1. 当元素的几个样式同时改变时定义一个新的className，不要一个一个改变元素的样式属性；
2. 使用documentfragment或div等元素进行缓存操作；
3. 先display:none隐藏元素，然后对元素进行所有操作，最后再显示该元素；
4. 不要经常访问会引起浏览器flush队列的属性，如果想要访问先读取到变量中进行缓存；

会引起浏览器flush队列的属性：

offsetTop, offsetLeft, offsetWidth, offsetHeight
scrollTop/Left/Width/Height
clientTop/Left/Width/Height
width,height
请求了getComputedStyle(), 或者 ie的 currentStyle

1. 让元素脱离动画流，减少回流的render tree的规模；

  $("#block1").animate({left:50});  
  $("#block2").animate({marginLeft:50});  

1. 尽可能在DOM树的最末端改变class（可限制回流的范围）；
2. 避免设置多层内联样式（将样式合并在一个外部类，仅产生一次回流）；
3. 动画效果应用到position属性为absolute或flex的元素上；
4. 避免使用table数据；
5. 避免使用CSS的JavaScript表达式。