当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程称为reflow。
什么时候引起重排？
1.页面渲染初始化
2.DOM树的结构改变
包括了：
- 添加或者删除DOM结点
- 元素内容变化（文字的数量、文字的大小、图片的大小、图片的更换）
3.render树变化
- 元素尺寸或位置发生改变（如padding的修改）
- display属性改为可见。
- 激活CSS伪类（例如：:hover）
4. 浏览器窗口大小发生改变（resize事件触发）
5. 最复杂的一种：获取某些属性，引发回流很多浏览器会对回流做优化，他会等到足够数量的变化发生，在做一次批处理回流。offsetHeight属性需要返回最新的布局信息，因此浏览器不得不执行渲染队列中的“待处理变化”并触发重排以返回正确的值。
- offsetTop, offsetLeft, offsetWidth, offsetHeight
- scrollTop/Left/Width/Height
- clientTop/Left/Width/Height
- width,height
- 调用了getComputedStyle(), 或者 IE的 currentStyle
回流一定伴随着重绘，而重绘却可以单独出现
减少回流？
- 避免逐项更改样式。最好一次性更改style属性，或者将样式列表定义为class并一次性更改class属性。
// 不推荐的写法:
var ele = document.getElementById('myDiv');
ele.style.borderLeft = '1px';
ele.style.borderRight = '2px';
ele.style.padding = '5px';
// 推荐的写法:
var ele = document.getElementById('myDiv');
// 1. 重写style
ele.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
// 2. add style
ele.style.cssText += 'border-left: 1px;'
// 3. use class
ele.className = 'active';
- 避免循环操作DOM。创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document。
//创建轻量级文档片段
var fragment = document.createDocumentFragment();
//将要加的子节点写在fragment上
var li = document.createElement('li');
li.innerHTML = 'apple';
fragment.appendChild(li);
var li = document.createElement('li');
li.innerHTML = 'watermelon';
fragment.appendChild(li);
//当附加一个fragment到父节点时，实际上被添加的是该fragment的子节点，而不是片断本身
document.getElementById('fruit').appendChild(fragment);
- 避免多次读取offsetLeft等属性。无法避免则将它们缓存到变量。
- 将复杂的元素（如动画）绝对定位或固定定位，使它脱离文档流。否则回流代价十分高
display:none和visibility:hidden会产生回流与重绘吗？
display：none指的是元素完全不陈列出来，不占据空间，涉及到了DOM结构，故产生reflow与repaint
visibility：hidden指的是元素不可见但存在，保留空间，不影响结构，故只产生repaint
参考：
深入理解浏览器的重绘与重排
