回流重绘

回流（Reflow，也叫Layout）

• 添加、删除、移动DOM节点
• 改变元素的尺寸（width/height/padding/margin/border等）
• 改变元素的显示状态（如display: none/block）
• 改变页面字体大小
• 读取某些属性（如offsetTop、scrollTop等）时，浏览器为了返回正确值也会强制回流

重绘（Repaint）

• 改变元素的背景色、文字颜色、边框颜色等
• 改变元素的outline、box-shadow等
• 改变阴影、边框颜色等
• 只影响元素的外观，不影响布局

重绘重排；更改opacity5到0.5会引发重绘重排吗 ？

一般不会重排，但是会重绘； 使用translateZ0提升到合成层，触发合成层优化，就不会触发重绘；

更改width会引发重绘重排吗？

会触发重排，然后导致重绘；

更改keyframes会引发重绘重排吗？

如果是更改几何属性，比如width这种，每一帧都会触发； 如果是transform或者opacity这类，都会优化到合成层；

更改transform会引发重绘重排吗？

合成层，不触发

更改translateY会引发重绘重排吗？

合成层，不触发

• 重绘：元素的样式改变，但是不影响布局；
• 重排：元素的布局改变，会引起重绘；

合成层优化

浏览器渲染引擎通过分层机制提升性能的核心策略;

• 浏览器将页面分为多个合成层
• 每个层可以独立进行光栅化

优势：

• 减少了重绘范围，只重绘该层内容
• GPU加速，避开主线程

触发属性： 给高频变化的属性添加will-change，以启动合成层优化；

/* 推荐写法 */
.animate-element {
  will-change: transform;
  transform: translateZ(0);
}