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 使用小值（例如 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 会持续运行，损害性能和正确性。

gsap-performance

相关 Skills