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外部依赖
| 类型 | 依赖 |
|---|---|
| package | gsap（quickTo 属核心 API） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 启发式而非阈值 — 哪些数值算「小 scrub」、多少并发 tween 会卡，文中只给方向与「在低端设备上实测」的建议，需要使用者按设备实测调参。
- 过度套用会牺牲表达力 — 并非所有布局属性动画都能用 transform 等价替代（如自适应高度展开），教条化使用会限制设计；原文已用 when possible 限定。
- 与 ScrollTrigger 建议需合并理解 — refresh 频率、pin 数量与 scrolltrigger skill 的要求交叉，孤立照搬任一份都可能不完整（例如为省性能干脆不 refresh 会导致触发位置失准）。
- 无测量工具 — skill 不提供 profiling 方法或指标（无 Performance 面板、无 frame budget 指引），实际验证仍靠开发者自行测量。
风险提醒：绿色，放心使用。纯指令型 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 建议不适用）。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 gsap-performance.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agenta5bb2ad20a79ec59…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库greensock / greensock/gsap-skills
原始 GitHubgreensock/gsap-skills ↗
Stars15326
最近推送2026-07-29
本 skill commit
aed9cfd327许可MIT（仓库根 LICENSE，Copyright (c) 2026 GreenSock；GitHub API spdx_id=MIT；每个 SKILL.md frontmatter 亦写 license: MIT）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。