reflow 和 repaints

前端微知识

浏览器解析基本流程

浏览器解析的基本流程

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)