GSAP 性能优化

何时使用此技能

在优化 GSAP 动画以实现流畅的 60fps、减少布局/绘制成本，或者当用户询问性能、卡顿或快速动画的最佳实践时使用。

相关技能： 使用 gsap-core（变换、autoAlpha）和 gsap-timeline 构建动画；ScrollTrigger 性能请参考 gsap-scrolltrigger。

优先使用变换和透明度

动画化 transform（x、y、scaleX、scaleY、rotation、rotationX、rotationY、skewX、skewY）和 opacity 可以将工作保持在合成器层面，避免布局和大部分绘制。当变换可以达到相同效果时，避免动画化布局密集型属性。

• ✅ 优先使用：x、y、scale、rotation、opacity。
• ❌ 尽量避免：width、height、top、left、margin、padding（它们会触发布局并可能导致卡顿）。

GSAP 的 x 和 y 默认使用变换（translate）；用它们代替 left/top 来实现移动效果。

will-change

在 CSS 中为将要动画化的元素使用 will-change。它向浏览器提示将元素提升为独立图层。

will-change: transform;

批量读写

GSAP 内部会批量更新。当将 GSAP 与直接的 DOM 读写或依赖布局的代码混合使用时，避免以导致重复布局颠簸的方式交错读写操作。最好先执行所有读取操作，再执行所有写入操作（或让 GSAP 一次性处理写入）。

大量元素（错开、列表）

• 当动画相同时，使用 stagger 而不是许多带有手动延迟的单独补间；这样效率更高。
• 对于长列表，考虑 虚拟化 或仅动画化可见项；如果同时创建数百个补间会导致卡顿，请避免这样做。
• 尽可能重用时间轴；避免每帧都创建新的时间轴。

频繁更新的属性（例如鼠标跟随）

对于频繁更新的属性（例如鼠标跟随的 x/y），优先使用 gsap.quickTo()。它会重用单个补间，而不是每次更新都创建新补间。

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: 1）可以减少滚动期间的工作量；在低端设备上测试。
• 仅在布局实际发生变化时（例如内容加载后）调用 ScrollTrigger.refresh()，而不是每次调整大小都调用；尽可能使用防抖。

减少同时进行的工作

• 当动画不在视口内或用户离开页面时，暂停或终止它们。
• 避免同时动画化大量元素上的大量属性；如有必要，简化或顺序执行。

最佳实践

• ✅ 动画化 transform 和 opacity；仅在动画元素上使用 CSS 的 will-change。
• ✅ 当动画相同时，使用 stagger 而不是许多带有手动延迟的单独补间。
• ✅ 对频繁更新的属性（例如鼠标跟随）使用 gsap.quickTo()。
• ✅ 清理或终止屏幕外的动画；当布局变化时调用 ScrollTrigger.refresh()，并尽可能使用防抖。

不要

• ❌ 当 x/y/scale 可以达到相同效果时，不要为了移动而动画化 width/height/top/left。
• ❌ 不要在“以防万一”的情况下为每个元素设置 will-change 或 force3D；只用于实际在动画化的元素。
• ❌ 不要在未在低端设备上测试的情况下创建数百个重叠的补间或 ScrollTrigger。
• ❌ 不要忽视清理；残留的补间和 ScrollTrigger 会持续运行并损害性能和正确性。