重排(Reflow)：

元素的位置发生变动时发生重排，也叫回流。此时在关键渲染路径(浏览器将html，css和js转换为屏幕上的像素所经历的步骤序列)中的 Layout 阶段，计算每一个元素在设备视口内的确切位置和大小。当一个元素位置发生变化时，其父元素及其后边的元素位置都可能发生变化，代价极高

重绘(Repaint):

元素的样式发生变动，但是位置没有改变。此时在关键渲染路径中的 Paint 阶段，将渲染树中的每个节点转换成屏幕上的实际像素，这一步通常称为绘制或栅格化

​ 重绘不一定会出现重排，重排必然会触发重绘

如何触发重排和重绘

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

添加，删除，更新dom节点

通过display: none隐藏一个DOM节点-触发重排和重绘

通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化

用户行为，例如调整窗口大小，改变字号或滚动。

如何减少重排和重绘

减小重排范围：脱离文档流(使用absolute或fixed脱离文档流)

减少重绘次数：合并样式修改