- 回流
浏览器使用 DOM 树和 CSSOM 树生成 Render 树后，会遍历 Render 树并根据每个节点的尺寸和位置进行布局，之后 Render 树中节点的尺寸、位置、可见性发生改变都会重新构建 Render 树，重构 Render 树叫做回流。回流完成后，浏览器会重新绘制受影响的部分，是重绘过程。因此，回流必定引发重绘。
- 重绘
当 Render 树中的一些节点需要更改只影响外观的属性时，称为重绘。
- 何时回流
- 页面初始化渲染
- 添加或删除 DOM
- DOM 位置、尺寸、边框、边距发生变化
- 浏览器窗口变化
- 使用获取位置的属性时(如：offsetTop, offsetWidth, scrollTop/Left/Width/Height,clientTop/Left/Width/Height,width,height,getComputedStyle()等)
- 何时重绘
节点的颜色、阴影、背景色改变时。
- 如何优化
浏览器会把引起回流和或重绘的操作收集起来，等这些操作到了一定量或一定时间后一次处理(使用获取位置的属性时会立即处理，以便获取的位置是最新的)。
开发者要尽量减少对 Render 树的改动：
- 合并多次 DOM 操作和 CSS 操作
- 让经常变动的元素脱离文档流，减少 Render 树的改动范围
- 尽量不使用 table 布局
- 用 CSS 改变样式而不是用 JavaScript 控制样式
- 合理使用获取元素位置的属性
参考：
