gsap-performance · 定位 GSAP 动画卡顿来源

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

原逻辑：每次 pointermove 调用 gsap.to(dot,{x,y})；同一元素高频更新；尚无性能测量。

输出

编辑示例 · 未运行

const setX = gsap.quickTo(dot, "x", { duration: 0.2, ease: "power2.out" });
const setY = gsap.quickTo(dot, "y", { duration: 0.2, ease: "power2.out" });
function onMove(event) { setX(event.clientX); setY(event.clientY); }
window.addEventListener("pointermove", onMove);
// 卸载：移除同一 onMove 监听，并清理相应动画。

待验证：同设备相同手势下比较长帧和主线程工作；未测量前不报告提速百分比。

从布局、绘制、事件频率和动画生命周期检查性能问题，针对实际瓶颈提出修改。

具体任务

定位动画触发的布局与绘制成本：用实际页面和性能记录区分属性选择、测量循环与过量元素。

为高频交互减少逐帧工作：改用适合的 transform、批量读写或 quickSetter/quickTo，并复测。

必需材料

可复现页面与动画代码

目标设备和卡顿场景

可选材料

性能录制

修改前指标与项目约束

使用门槛

可在相同设备、同一路径重复观察问题。

这个 Skill 额外提供的方法

先解释瓶颈再改动，便于判断优化是否真正改善目标场景。

编辑示例（未运行）

检查鼠标跟随元素反复创建 tween

任务：针对编辑提供的更新代码给出修正方向。

输入：
原逻辑：每次 pointermove 调用 gsap.to(dot,{x,y})；同一元素高频更新；尚无性能测量。

结果片段：
```javascript
const setX = gsap.quickTo(dot, "x", { duration: 0.2, ease: "power2.out" });
const setY = gsap.quickTo(dot, "y", { duration: 0.2, ease: "power2.out" });
function onMove(event) { setX(event.clientX); setY(event.clientY); }
window.addEventListener("pointermove", onMove);
// 卸载：移除同一 onMove 监听，并清理相应动画。
```

待验证：同设备相同手势下比较长帧和主线程工作；未测量前不报告提速百分比。

片段给出复用 tween 的方法，但明确性能收益必须在真实页面测量。 此为编辑示例，未安装或运行上游 Skill。

首次任务

诊断【页面/代码】在【设备/场景】的动画卡顿；验收：定位成本来源、给最小修改、同条件前后复测，不凭属性名宣称提速。
必需材料：可复现页面与动画代码：【请填写或粘贴】；目标设备和卡顿场景：【请填写或粘贴】

验收方法

是否使用真实性能证据定位

是否减少布局读写交错和同时工作量

前后比较的设备与操作是否一致

依赖与准备

已集成 GSAP 的项目、浏览器性能工具与目标设备；无需为诊断自动升级依赖。

使用边界

桌面流畅不能代表低性能移动设备也流畅。

will-change 与 GPU 合成不是免费加速，需测量内存和图层代价。

排错

用了 transform 仍卡顿：检查动画之外的 JS、图片解码和同时运行的效果。

加了很多 will-change 反而更慢：只在必要元素和阶段使用，检查图层数量与内存。

固定来源

https://github.com/greensock/gsap-skills/blob/aed9cfd3277740755f6bfc1155c7aa645403b760/skills/gsap-performance/SKILL.md

先看看示例

输入

输出

方法说明