# 重绘与回流(重排)
# 概念
首先我们先明确文档加载到完成的过程：
- 根据文档生成DOM树(包括display:none)
- 在DOM树基础上根据节点的几何属性(margin/padding/width/height)生成render树(不包括display:none,但包括visibility:hiddenn)
- 在render树基础上进一步渲染css样式
回流(reflow): 当render树中的元素因为大小边距位置等问题繁盛改变而需要重建的过程叫做回流
重绘(repaint): 当元素的一部分属性发生改变，如外观颜色等不会引起布局的变化而需要重新渲染的过程叫做重绘
回流比重绘的代价要高，至于具体花销这render树的节点树多少有关。回流一定伴随这重绘，而重绘不一定引起回流。
# 尽量避免
- 将那些改变样式的操作集合在一次完事，直接改变className或者cssText
- 让要操作的元素进行离线处理，处理完事后在一起更新
(1) 使用DocumentFragment进行缓存操作，引发一次回流和重绘 (2) 使用display:none,只引发两次回流和重绘 (3) 使用cloneNode和replaceChild，只引发一次回流和重绘 - 不要经常访问引起浏览器flush队列的属性，高频访问请先缓存
- 将需要多次重排的元素，position设置为absolute或fixed，这样脱离文档流
- 尽量不要使用表格布局