1实现原理 · 为什么它能做到
核心模型一句话：只动合成器友好的 transform 与 opacity，避免触发布局与重绘。
skills/gsap-performance/SKILL.md
keeps work on the compositor and avoids layout and most paint.
为什么能实现宣称功能：transform/opacity 的动画可交给合成线程，不触发 layout/reflow；而 width/height/top/left 会逐帧排版。skill 把「性能」翻译成可执行的属性选择规则，而不是空泛的「要快」。
will-change 的使用边界被写死：只给真正会动的元素，不无脑开。
skills/gsap-performance/SKILL.md
It hints the browser to promote the layer.
配套 Do Not 明确反对「just in case」地给所有元素加 will-change/force3D——过度提升图层会吃显存并可能在低端机上更卡。
读写分离防 layout thrashing：混用 GSAP 与手写 DOM 读写时，先把所有读做完再统一写。
skills/gsap-performance/SKILL.md
Prefer doing all reads first, then all writes
这里在做什么：浏览器把「读布局属性」视为强制同步 flush；逐次读-写交替会让每帧多次布局。skill 建议要么批量，要么干脆把写交给 GSAP 统一处理。
高频更新的正确工具是 gsap.quickTo()：复用同一个 tween，而不是每次事件都 new 一个。
skills/gsap-performance/SKILL.md
It reuses a single tween instead of creating new tweens on each update.
典型场景是鼠标跟随（mousemove 每帧触发）：每次 gsap.to() 都会新建 tween 对象并触发垃圾回收压力；quickTo 返回一个可反复调用的 setter。
对多元素给「同等效果选更省」的替换规则：stagger 替代一堆手写 delay，长列表用虚拟化或只动可见项。
skills/gsap-performance/SKILL.md
- Use **stagger** instead of many separate tweens with manual delays when the animation is the same;
并提示避免几百个同时运行的 tween，以及不要每帧新建 timeline——都在同一节「Many Elements」「Reduce Simultaneous Work」中。
ScrollTrigger 的性能侧建议单独成节：少 pin、scrub 用数值、refresh 只在布局真变化时调用并去抖。
skills/gsap-performance/SKILL.md
Call **ScrollTrigger.refresh()** only when layout actually changes (e.g. after content load), not on every resize; debounce when possible.
与 gsap-scrolltrigger 的 refresh 语义互补：那边讲「什么时候必须刷新」，这边讲「刷新别太频繁」。
把清理当作性能项：离屏/未激活动画应暂停或 kill，否则持续占用主线程与内存。
skills/gsap-performance/SKILL.md
❌ Ignore cleanup; stray tweens and ScrollTriggers keep running and can hurt performance and correctness.
同一 Do Not 里把「性能」与「正确性」并列——残留 tween 会更新已移除的节点，既是性能问题也是 bug 来源。
2核心能力
01属性选择优化：transform 系（x/y/scale/rotation/skew）与 opacity 优先，避开 width/height/top/left/margin/padding
02will-change 图层提升提示（仅对会动的元素）
03读写批处理：避免与手写 DOM 操作交错造成 layout thrashing
04gsap.quickTo()：高频更新属性（鼠标跟随）复用单个 tween
05多元素策略：stagger 合并、长列表虚拟化、避免数百并发 tween
06ScrollTrigger 调优：谨慎 pin、scrub 数值、refresh 去抖
07清理与降载：暂停/杀掉离屏动画、精简同时运行的属性数
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| package | gsap（quickTo 属核心 API） |
4管控建议与判定依据
建议配套管控措施
面向 Agent
可自动加载
面向管理者
登记来源与版本
判定依据（文件路径与关键语句摘要）
- SKILL.md: 纯提示词指令与规则文本，无脚本执行与外部影响
审计说明： 。纯指令型 skill：目录内仅 SKILL.md（4,139 B），无脚本、无网络调用、无外链、无凭证读取、无文件写入；它通篇是渲染性能的取舍建议（transform/opacity 优先、will-change 边界、quickTo、去抖 refresh、清理），本身不产生任何外部接触面。注意点仅为建议的适用边界：低端设备上的最优参数需实测，skill 给的是方向不是阈值。
5第二遍独立确认
- [ok] 目录资产面：仅 SKILL.md — skills/gsap-performance/ 下唯一文件 SKILL.md（4,139 B）；无 scripts/、references/、数据文件；URL 扫描 0 条。
- [ok] external_deps 只剩 gsap 包 — 文件内无任何 URL 或第三方工具引用，仅使用 gsap.quickTo 与 ScrollTrigger.refresh 等本体 API；包依赖证据取自 README 安装段。
- [ok] quickTo 的描述是否与官方一致 — gsap.quickTo(target, property, vars) 返回可反复调用的函数、内部复用单个 tween，与官方 API 语义一致；示例（mousemove 中调用 xTo/yTo）即官方推荐写法。
- [ok] 「scrub 数值可减少滚动期工作量」是否为夸大 — 原文措辞为「**scrub** with a small value (e.g. `scrub: 1`) can reduce work during scroll; test on low-end devices.」——带不确定性限定与实测建议，非断言，不构成夸大。
- [ok] 安全反例搜索 — token 扫描：curl/wget/fetch(/XMLHttpRequest/exec(/child_process/process.env/.env/API_KEY/secret 零命中；无外部资源引用。
- [ok] 与 gsap-scrolltrigger 的 refresh 叙述是否冲突 — scrolltrigger 要求布局变化后必须 refresh()（否则位置失准），performance 要求不要每次 resize 都 refresh 并去抖——两者互补而非矛盾（resize 本就被 ST 自动去抖处理）。
- [ok] 元数据与 pin — frontmatter license: MIT；HEAD = aed9cfd3277740755f6bfc1155c7aa645403b760；GitHub API stars 15326 / pushed_at 2026-07-29T17:36:08Z。
- [ok] 是否只是「常识复述」（价值质疑） — 文中给出具体替换对象（width/height/top/left → x/y/scale）、具体 API（quickTo）、具体数值建议（scrub: 1）与具体反例（just in case 加 will-change），超出泛泛常识。
6结论
适合： 适合已有 GSAP 动画并且出现掉帧/卡顿的项目优化阶段，或作为新项目动画规范的性能清单；对移动端/低端设备、长列表、鼠标跟随类交互尤其有用。
不适合： 不适合尚未跑起来的项目（应先按 gsap-core/gsap-timeline 写对，再谈优化）；不适合需要性能度量/自动诊断的场景（它只给规则不给工具）；不适合用 CSS Animations 而非 GSAP 的项目（部分建议可迁移，但 quickTo/stagger 等 API 建议不适用）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload gsap-performance.tar.gz
sha256:
Option B · Copy Guide for Agenta5bb2ad20a79ec59…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit aed9cfd327.