gsap-performance

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 默认使用变换（translate）来处理 x 和 y；移动元素时应使用它们，而不是 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 值（例如 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 会持续运行，影响性能和正确性。