使用CSS transition优化性能需减少重排与重绘，优先对transform和opacity等可合成属性进行动画，避免操作width、height等触发重排的属性；通过will-change或translateZ(0)启用硬件加速，将元素提升为独立图层由GPU处理；控制transition触发频率，结合pointer-events、防抖或节流防止动画堆积；简化DOM结构，避免深层嵌套导致的性能开销，合理利用开发者工具检查合成层，确保动画流畅高效。
使用 CSS transition 提升页面交互性能，关键在于减少重排（reflow）和重绘（repaint），同时利用硬件加速。以下是几种有效的优化方法：
1. 只对可合成的属性使用 transition
浏览器在处理某些 CSS 属性时，能将其提升为独立图层，通过复合（compositing）阶段直接由 GPU 渲染，避免触发重排或重绘。 推荐用于 transition 的高效属性包括：- transform（如 translate、scale、rotate）
- opacity
- width、height
- margin、padding
- left、top（应改用 transform: translate 替代）
2. 启用硬件加速（GPU 加速）
通过将元素提升为合成层，交由 GPU 处理动画，显著提升流畅度。 常用方法是添加：transform: translateZ(0);或更现代的方式：
will-change: transform;注意：will-change 不宜滥用，应在交互前临时启用，结束后移除，避免内存占用过高。
3. 控制 transition 触发频率
频繁触发 transition（如鼠标悬停快速进出）会导致卡顿或动画堆积。 解决方式包括：- 使用 pointer-events: none 短暂禁用事件
- 在 JavaScript 中加防抖（debounce）或节流（throttle）控制触发
- 设置 transition-delay 避免意外触发
4. 减少层级嵌套与过度优化
深层嵌套的 transition 元素可能导致连锁重绘。 建议：- 尽量将动画元素独立为单独 DOM 节点
- 避免对包含大量子元素的容器做 transform 过渡
- 使用开发者工具“Layers”面板检查是否生成过多合成层
基本上就这些。合理使用 transform 和 opacity，配合 will-change 与事件控制，能让 transition 流畅又不拖累性能。
