reflow 和 repaint

浏览器解析基本流程

浏览器解析的基本流程

reflow和repaint

reflow，浏览器根据各类样式来计算并根据计算结果将元素放到肯定的地方。
repaint： relfow完成以后，浏览器把这些元素按照各自的特性绘制一遍。

引发reflow和repaint的操做

引发repaint的操做

一个元素的外观改变，可是没有改变布局的状况

1. visibility

2. outline

3. background color

引发reflow的操做

1. 改变窗口大小

2. 改变字体

3. 增长和删除样式表

4. 内容的改变，好比用户在输入框输入文字

5. 激活伪类

6. 操做class属性

7. 脚本操做DOM

8. 计算offsetWidth和offsetHeight

9. 设置style属性

display:none 触发reflow，而visibility:hidden 触发repaint，由于没有发生位置变化

避免和最小化影响

1. 直接改变你想改变的元素（避免经过父元素做用于子元素，而是直接做用于子元素）

2. 避免黄色至内联样式

3. 对于动画的元素，其position设为fixed或absolute

4. 权衡速度的平滑，速度慢，reflow比较频繁

5. 避免table布局

6. 避免css中含有js 表达式（只有IE）

如何判断元素reflow或者repaint

使用chrome开发者工具timeline:
timeline

参考资料：

1. REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?

2. Repaint 、Reflow 的基本认识和优化 (2)