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.避免太多导致需要回流的操作