GSAP Performance 是 GSAP 官方技能集中的一项性能优化技能，适用于优化 GSAP 动画以实现流畅的 60fps、降低布局与绘制成本，或在用户询问性能、卡顿、快速动画最佳实践时使用。相关技能包括用 gsap-core（transforms、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、列表）】 当动画相同时，使用 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()，不要每次 resize 都调用；尽可能做防抖处理。
【减少同时进行的工作】 当屏幕外或不活跃的动画不可见时（例如用户离开页面时），暂停或 kill 它们。 避免同时对大量元素动画化大量属性；必要时简化或改为顺序执行。
【最佳实践】 动画 transform 与 opacity；仅在会动画的元素上用 CSS 设置 will-change。 当动画相同时，用 stagger 替代大量带手动延迟的独立补间。 对高频更新的属性（如鼠标跟随）使用 gsap.quickTo()。 清理或 kill 屏幕外的动画；布局变化时调用 ScrollTrigger.refresh()，尽可能防抖。
【禁止事项】 当 x/y/scale 能实现相同外观时，不要为了位移而动画化 width/height/top/left。 不要“以防万一”地给每个元素设置 will-change 或 force3D；只用于实际正在动画的元素。 不要在未于低端设备上测试的情况下创建数百个重叠的补间或 ScrollTrigger。 不要忽略清理；游离的补间和 ScrollTrigger 会持续运行，可能损害性能与正确性。