一、什么是重排和重绘
1.1 重排(reflow)
- 重新生成布局
- 例如当某个子元素样式发生改变，直接影响到了其父元素以及往上追溯很多祖先元素（包括兄弟元素），这个时候浏览器要重新去渲染这个子元素相关联的所有元素的过程称为重排也称为回流。
1.2 重绘(repaint)
- 重新绘制某些不影响布局的元素
- 如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow。
二、什么样的操作会引起重排和重绘
2.1 重排
（1）添加或删除可见的DOM元素
（2）元素位置改变
（3）元素本身的尺寸发生改变
（4）元素内容改变
（5）页面渲染器初始化
（6）浏览器窗口大小发生改变
2.2 重绘
改变元素的外观都会引起重绘
三、重排和重绘的范围
- 重排 > 重绘
- 重排一定会重绘，重绘不一定重排
四、重排和重绘引发的性能问题
- 频繁的重排和重绘会导致浏览器卡顿
- 解决方案
- 尽量精简css样式表；
- 批量修改DOM；
- 尽量降低重排和重绘的DOM元素层级，减小成本；
- table元素的重排和重绘成本，要高于div元素，尽量不要使用table元素。
