回流( reflow )与重绘( repaint )

1、了解浏览器的渲染机制

（1）浏览器采用流式布局模型。
（2）首先浏览器会将 HTML 解析成 DOM，把 CSS 解析成 CSSOM，把 CSSOM 与 DOM 结合产生 render tree。
（3）有 render tree 之后，我们知道了节点样式，然后浏览器会计算节点的位置，然后把节点绘制到页面上。

2、回流

当 render tree 中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流( reflow )。每个页面至少需要一次回流，就是在页面第一次加载的时候。

回流的产生：

• 1.页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次回流。
• 2.浏览器窗口尺寸改变
• 3.元素位置和尺寸发生改变的时候
• 4.新增和删除可见元素
• 5.内容发生改变（文字数量或图片大小等等）
• 6.元素字体大小变化
• 7.激活CSS伪类（例如：:hover）
• 8.设置style属性
• 9.查询某些属性或调用某些方法。比如说：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight

3、重绘

在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流后，浏览器会重新绘制受影响的部分到屏幕中，该过程成为重绘。

重绘的产生：

• 1.background 改变
• 2.visibility 改变

总结：回流一定会引起重绘，重绘不一定会引起回流。
回流会导致页面重排，影响性能

4、避免方法

1. 直接改变className,如果动态改变样式，则使用cssText(没有优化的浏览器可以考虑)；
2. 让要操作的元素进行’离线处理’，处理完后一起更新；
   a、使用 DocumentFragment 进行缓存操作，引发一次回流和重绘；
   b、使用 display:none 技术，只引发两次回流和重绘；
   c、使用 cloneNode(true or false) 和 replaceChild 技术，引发一次回流和重绘；
3. 不要经常访问会引起浏览器 flush 队列的属性，如果确实要访问，就利用缓存；
4. 让元素脱离动画流，减少回流的 Render tree 的规模；