回流与重绘

重绘是指当页面中元素的样式发生改变（如颜色、阴影、边框等）而不影响它在文档流中的位置时，浏览器会对这些元素进行重新绘制，这个过程称为重绘

回流是指页面中元素的尺寸、结构或某些属性发生改变时，浏览器需要重新计算元素的大小和位置，然后再重新渲染页面的过程

回流必定会触发重绘，但重绘不一定会引起回流

触发回流的常见情况包括：

• 添加或者删除可见的 DOM 元素
• 元素位置/尺寸/内容发声改变
• 浏览器窗口大小发生变化
• 应用 CSS 样式的改变

引起回流的样式改变：

• 改变元素的尺寸（width、height、padding、margin等）
• 改变元素位置（top、left、right、bottom等）
• 改变元素显示（display:none）
• 添加或删除可见的 DOM 元素
• 改变元素字体
• 改变浏览器窗口大小

引起重绘的样式改变：

• 改变元素颜色
• 改变元素背景颜色
• 改变元素阴影
• 改变元素边框

所以在页面优化优性能时，我们应该尽量减少触发回流的操作，一些常见的优化手段：

• 批量修改DOM（Render 的批处理也会如此考虑的）
• 使用 transform 代替 top/left
• 使用 visibility 代替 display:none
• 尽量减少不必要的样式改变
• 将颜色、背景颜色、边框等发生重绘的样式写在 CSS 样式的前头