用途分类 / 其他用途
Gsap Performance Skill 安全审计
作者说它能做什么(原文)
Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps.
第三方安全检查结论
这次检查未发现明显风险
- 已检查文件
- 1
- 发现的风险
- 0
会不会运行危险命令?检查是否下载程序后直接运行、让他人远程控制电脑,或藏起要运行的命令。未发现风险
会不会泄露文件和密钥?检查是否发送含密码或密钥的文件,以及代码里是否直接写了密钥。未发现风险
会不会删除文件或一直在后台运行?检查是否大范围删除文件、改写磁盘,或设置自动启动。未发现风险
会不会绕过安全保护?检查是否跳过网站安全验证、开放过多文件权限,或取消操作前的确认。未发现风险
会不会误导 AI 或隐藏内容?检查工作说明是否要求 AI 忽略你的指令、干扰检查结果,或夹带看不见的文字。未发现风险
会不会偷偷改推广链接或收款方?检查是否强制替换推广链接或收款对象,同时要求隐瞒更改。未发现风险
Skill 逻辑拆解
该 Skill 是一份 GSAP 动画性能指南,建议优先使用 transform 和 opacity,避免会频繁触发布局计算的属性。
查看原文
Animating **transform** (`x`, `y`, `scaleX`, `scaleY`, `rotation`, `rotationX`, `rotationY`, `skewX`, `skewY`) and **opacity** keeps work on the compositor and avoids layout and most paint. Avoid animating layout-heavy properties when a transform can achieve the same effect.- ✅ Prefer: **x**, **y**, **scale**, **rotation**, **opacity**.- ❌ Avoid when possible: **width**, **height**, **top**, **left**, **margin**, **padding** (they trigger layout and can cause jank).它建议将 DOM 读取与写入分批处理,并限制同时运行的动画数量,以减少布局抖动和设备负载。
查看原文
GSAP batches updates internally. When mixing GSAP with direct DOM reads/writes or layout-dependent code, avoid interleaving reads and writes in a way that causes repeated layout thrashing. Prefer doing all reads first, then all writes (or let GSAP handle the writes in one go).- Use **stagger** instead of many separate tweens with manual delays when the animation is the same; it’s more efficient.- For long lists, consider **virtualization** or animating only visible items; avoid creating hundreds of simultaneous tweens if it causes jank.- Reuse timelines where possible; avoid creating new timelines every frame.文中的 JavaScript 只是一个示例:它为指定容器注册鼠标移动监听器,并把指针坐标传给两个复用的 GSAP tween。没有可见的网络传输、凭据访问或文件操作。
查看原文
```javascriptlet 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);});```该 Skill 明确提醒只为实际动画元素使用 will-change,并清理不再需要的 tween 和 ScrollTrigger,以避免持续的资源消耗和行为错误。
查看原文
- ✅ Animate **transform** and **opacity**; use **will-change** in CSS only on elements that animate.- ✅ Use **stagger** instead of many separate tweens with manual delays when the animation is the same.- ✅ Use **gsap.quickTo()** for frequently updated properties (e.g. mouse followers).- ✅ Clean up or kill off-screen animations; call **ScrollTrigger.refresh()** when layout changes, debounced when possible.- ❌ Animate **width**/ **height**/ **top**/ **left** for movement when **x**/ **y**/ **scale** can achieve the same look.- ❌ Set **will-change** or **force3D** on every element “just in case”; use for elements that are actually animating.- ❌ Create hundreds of overlapping tweens or ScrollTriggers without testing on low-end devices.- ❌ Ignore cleanup; stray tweens and ScrollTriggers keep running and can hurt performance and correctness.从这里开始 · 工作说明SKILL.md
gsap-performance文件与检查记录1 个文件
检查范围与遗漏
逐文件查看涉及的内容
下方列出本次涉及的原文范围;纳入检查不代表已查清所有问题。
SKILL.md已纳入全文
这份报告只针对上方版本。我们看了拿到的代码和说明文件,没有实际运行 Skill,也没有检查它另外安装的软件包。因此,这不是“保证安全”的承诺;换了版本或使用环境,结果也可能不同。
SKILL.md工作说明
- 读取了多少行
- 80
- 文件校验值(用于核对版本)
- 7d91fee4dc4c9439851d6e4ead7cce1b91dd9fec1564e0f3cb00e328fd70ec5b