回流(reflow)和重绘(repaint)

首先先介绍浏览器解析的工作原理：


1.解析HTML文档建立dom树
2.解析CSS(包含外部css以及js生成的)构建渲染树，计算出节点的样式
3.布局渲染树，以根节点递归调用，计算每一个节点的大小，位置等，给出每一个节点出现在屏幕的精准目标
4.绘制渲染树，遍历渲染树，每个几点使用ui后端层来绘制


可以看出，reflow和repaint分别出现在3/4步，现在我们给出定义：


根据dom结构中，每个元素都有自己的盒子，这些需要浏览器根据各种样式(浏览器的/开发人员定义的)来计算并根据结果将元素放置在该出现的位置，这个过程称之reflow(设置页面布局)，每个页面至少需要完成一次回流，就是页面加载的时候
当各种盒子的位置/大小/以及其它属性都确定下来后，浏览器于是便把这些元素都按照各自的特性绘制一遍，于是页面的内容出现了，这个过程称之为repaint，当渲染树中某些元素更新一些只影响元素外观风格的属性，而不影响布局，比如background-color，这个过程就是重绘。


注意： 
1.回流必将引起重绘，重绘不一定引起回流
2.回流的成本比重绘的成本高很多
3.display:none 会引起回流，visibility:hidden 只会引起重绘，因为位置没有改变


所以我们可以得出结论：
repaint的发生仅仅是在元素的外观发生变化而布局没有改变的情况下
reflow发生在dom结构发生改变
eg:
1.dom元素的添加，修改，删除(reflow+repaint)
2.仅仅改变dom元素的字体颜色(repaint)
3.window的resize(reflow+repaint)
4.滚动滚动条(reflow+repaint)
5.应用新的样式


reflow & repaint的开销是非常大的，所以在开发中应该注意:
1.避免多次设置行内样式，避免分别单独设置样式，这都会多次触发reflow
2.使用classname，classname可以满足多个样式一次修改，只进行一次reflow
3.当要批量操作一个dom树时，可以将其现在dom树中删除，带操作完成后，在添加到文档树，避免多次reflow
4.当某一区域需要频繁地操作dom时，可以将其外部包裹一个fixed或者absolute布局
5.避免使用table布局，因为table布局一旦触发reflow，就会导致table里所有其他元素reflow
6.使用display：none；只引起两次回流和重绘
7.如果需要创建多个DOM节点，可以使用DocumentFragment创建完后一次性的加入document 　
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);