1. 什么是回流与重绘?
1.1 回流
根据样式计算盒子在页面上的大小与位置
1.2 重绘
计算完属性后根据每个盒子特性进行绘制
1.3 渲染机制
解析HTML->DOM->解析CSS->CSSOM->结合成Render Tree->回流->重绘->display
2. 触发条件
回流触发: 1.添加或删除可见的DOM元素 2.元素的位置发生变化 3.元素的尺寸发生变化 4.内容发生变化,文本代替图片 5.页面一开始渲染的时候 6.浏览器的窗口尺寸变化 获取一些特定的值也会触发回流,取值。 重绘触发: 1.颜色的改变 2.文本方向的改变 3.阴影的修改
3. 如何减少
1.尽量使用class设定样式 2.避免设置多项内联样式 3.应用元素的动画使用position属性的fixed或absolute 4.避免使用table布局 5.css3硬件加速 6.避免使用CSS的JS表达式 7.避免太多导致需要回流的操作