改变 DOM 结构的操作会触发重构（reflow），而改变 DOM 样式的操作会触发重绘（repaint）。

重构的效率会由于重绘。

触发重构的操作

• 改变窗口大小
• 改变文字大小
• 改变内容
• 输入框输入文字
• 激活伪类
• 操作 class 属性
• 操作 DOM
• 获取 offsetWidth offsetHeight
• 设置 style 属性

触发重绘的操作

• 改变颜色（背景、文字等等）

在使用 transform 的时候，我们可以在最后添加上一个 translateZ(0)，这样并不会改变原有效果，但由于动用了 Z 轴，也就是涉及到了三维，浏览器会强制使用 GPU 来渲染，但实际上现在的浏览器默认都是开启了硬件加速的。

如果遇到了性能问题，可以考虑使用 will-change 属性，例如给一个元素设置 will-change:transform; 样式，浏览器就会监听这个元素的 transform 属性，为 transform 属性的变化提前做好准备和一系列优化工作。

但值得注意的是 will-change 本身是消耗性能的，只有我们遇到性能问题的时候才会使用 will-change 属性去解决，可以看做是最后的优化手段，一般来说，如果属性变化并不那么频繁，我们会在修改属性值之前添加上 will-change 属性，在属性修改完之后移除 will-change 属性以节约性能。