GSAP 性能
何时使用此技能
在优化 GSAP 动画以实现流畅 60fps、减少布局/绘制成本，或用户询问性能、卡顿或快速动画最佳实践时应用。
相关技能： 使用 gsap-core（变换、autoAlpha）和 gsap-timeline 构建动画；关于 ScrollTrigger 性能，请参见 gsap-scrolltrigger。
优先使用 Transform 和 Opacity
对 transform（x、y、scaleX、scaleY、rotation、rotationX、rotationY、skewX、skewY）和 opacity 进行动画处理，可将工作保持在合成器上，避免布局和大部分绘制。当 transform 能达到相同效果时，避免对布局密集型属性进行动画。
- ✅ 优先使用：x、y、scale、rotation、opacity。
- ❌ 尽可能避免：width、height、top、left、margin、padding（它们会触发布局并可能导致卡顿）。
GSAP 的 x 和 y 默认使用 transform（translate）；在移动时优先使用它们，而不是 left/top。
will-change
在 CSS 中为将要动画化的元素使用 will-change。它提示浏览器提升层。
will-change: transform;
批量读取和写入
GSAP 内部会批量更新。当将 GSAP 与直接 DOM 读/写或依赖于布局的代码混合使用时，避免以导致重复布局抖动的方式交错读取和写入。优先先完成所有读取，再进行所有写入（或让 GSAP 一次性处理写入）。
大量元素（交错、列表）
- 当动画相同时，使用 stagger 而不是多个带有手动延迟的单独 tween；这样更高效。
- 对于长列表，考虑 虚拟化 或只对可见元素进行动画；避免创建数百个同时运行的 tween，如果会导致卡顿。
- 尽可能重用时间线；避免每一帧都创建新的时间线。
频繁更新的属性（例如鼠标跟随器）
对于频繁更新的属性（例如鼠标跟随器的 x/y），优先使用 gsap.quickTo()。它会重用单个 tween，而不是在每次更新时创建新的 tween。
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
ScrollTrigger 和性能
- pin: true 会提升被固定的元素；只固定必要的元素。
- 使用小值的 scrub（例如
scrub: 1）可以减少滚动过程中的工作量；在低端设备上测试。 - 仅在布局实际变化时（例如内容加载后）调用 ScrollTrigger.refresh()，而不是每次调整大小时都调用；尽可能进行防抖。
减少同时工作
- 当动画不处于可见状态时（例如用户导航离开），暂停或销毁屏幕外的或不活动的动画。
- 避免同时对一个元素的大量属性进行动画；如有必要，简化或序列化。
最佳实践
- ✅ 对 transform 和 opacity 进行动画；仅在将要动画化的元素上使用 CSS 的 will-change。
- ✅ 当动画相同时，使用 stagger 而不是多个带有手动延迟的单独 tween。
- ✅ 对频繁更新的属性（例如鼠标跟随器）使用 gsap.quickTo()。
- ✅ 清理或销毁屏幕外的动画；当布局变化时调用 ScrollTrigger.refresh()，并尽可能进行防抖。
禁止项
- ❌ 当 x/y/scale 能达到相同外观时，对移动使用 width/height/top/left 进行动画。
- ❌ “以防万一”在每个元素上设置 will-change 或 force3D；仅对实际正在动画的元素使用。
- ❌ 创建数百个重叠的 tween 或 ScrollTrigger，而不在低端设备上测试。
- ❌ 忽略清理；残留的 tween 和 ScrollTrigger 会持续运行，损害性能和正确性。