回流(reflow)与重绘(repaint)

一、页面显示过程

1. 生成DOM树(包括display:none的节点)
2. 在DOM树的基础上根据节点的集合属性(margin,padding,width,height等)生成render树(不包括display:none，head节点，但是包括visibility:hidden的节点)
3. 在render树的基础上继续渲染颜色背景色等样式

reflow: 当render树的一部分或者全部因为大小边距等问题发生改变而需要重建的过程，叫做回流*

repaint: 当诸如颜色背景等不会引起页面布局变化，而只需要重新渲染的过程叫做重绘*

二、什么会引起回流

1. 页面渲染初始化
2. DOM结构变化，比如删除了某个节点；
3. render树变化，比如减少了padding；
4. 窗口resize事件触发
5. 最复杂的一种：获取某些属性，引发回流 很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。 但是除了render树的直接变化。 当获取一些属性时，浏览器为了获得正确的值也会触发回流。这样就使得浏览器的优化失效了*

这些属性包括：
    1. offsetTop, offsetLeft, offsetWidth, offsetHeight
    2. scrollTop/Left/Width/Height
    3. clientTop/Left/Width/Height
    4. width,height
    5. 调用了getComputedStyle(), 或者 IE的 currentStyle

举个例子：
    var s = document.body.style;
    s.padding = "2px";   // 回流+重绘
    s.border = "1px solid red";   // 再一次 回流+重绘
    s.color = "blue";   // 再一次重绘
    s.backgroundColor = "#ccc";  // 再一次 重绘
    s.fontSize = "14px";   // 再一次 回流+重绘
    // 添加node，再一次 回流+重绘`
    document.body.appendChild(document.createTextNode('abc!'));

可以看出，回流一定伴随着重绘，而重绘却可以单独出现

三、减少回流

1. 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
2. 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
3. 避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
4. 将复杂的元素绝对定位或固定定位，使它脱离文档流。否则回流代价十分高

补充：改变字体大小会引发回流

display:none和visibility：hidden会产生回流与重绘吗？

display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint

visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint