浏览器解析基本流程
浏览器解析的基本流程
reflow和repaint
reflow，浏览器根据各种样式来计算并根据计算结果将元素放到确定的地方。
repaint： relfow完成之后，浏览器把这些元素按照各自的特性绘制一遍。
引起reflow和repaint的操作
引起repaint的操作
一个元素的外观改变，但是没有改变布局的情况
-
visibility
-
outline
-
background color
引起reflow的操作
-
改变窗口大小
-
改变字体
-
增加和删除样式表
-
内容的改变，比如用户在输入框输入文字
-
激活伪类
-
操作class属性
-
脚本操作DOM
-
计算offsetWidth和offsetHeight
-
设置style属性
display:none 触发reflow，而visibility:hidden 触发repaint，因为没有发生位置变化
避免和最小化影响
-
直接改变你想改变的元素（避免通过父元素作用于子元素，而是直接作用于子元素）
-
避免黄色至内联样式
-
对于动画的元素，其position设为fixed或absolute
-
权衡速度的平滑，速度慢，reflow比较频繁
-
避免table布局
-
避免css中含有js 表达式（只有IE）
如何判断元素reflow或者repaint
使用chrome开发者工具timeline:
timeline
参考资料：