- 重排(重构 / 回流 /Reflow)：当渲染树的一部分必须更新并且节点的尺寸产生了变动，浏览器会使渲染树中受到影响的局部生效，并从新结构渲染树。
- 重绘(Repaint)：是在一个元素的外观被扭转所触发的浏览器行为，浏览器会依据元素的新属性从新绘制，使元素出现新的外观。比方扭转某个元素的背景色、文字色彩、边框色彩等等
重排
- 元素宽度、高度扭转
- 新增、删除可见 dom 元素
- 元素的地位扭转
- 浏览器窗口尺寸扭转
- 填充内容的扭转，比方文本的扭转或图片大小扭转而引起的计算值宽度和高度的扭转
如何防止触发回流和重绘
- 防止频繁应用 style，而是采纳批改
class 的形式。
- 将动画成果利用到
position 属性为 absolute 或fixed的元素上。
- 也能够先为元素设置
display: none，操作完结后再把它显示进去。因为在display 属性为 none 的元素上进行的 DOM 操作不会引发回流和重绘
- 应用
createDocumentFragment 进行批量的 DOM 操作。
- 对于 resize、scroll 等进行防抖 / 节流解决。
- 防止频繁读取会引发回流 / 重绘的属性，如果的确须要屡次应用，就用一个变量缓存起来。
- 利用 CSS3 的
transform、opacity、filter 这些属性能够实现合成的成果，也就是 GPU 减速。