SuperAPI AI 工具集

optimize-web-animations

设计与创作

查看项目

更新于 10-15 21:09

技能介绍

用途:在真实页面上先测量再修改,目标不是删除动效,而是让离屏工作停止、可见动画正确恢复,并在路由切换或卸载时释放长期占用资源。

主要能力:检查仓库上下文与 AGENTS.md 等本地说明,运行 git status --short;定位页面组件、动画钩子、CSS keyframes、requestAnimationFrame、setInterval/setTimeout、canvas/WebGL/物理组件、媒体元素、GSAP 时间线与可见性工具;审计副作用清理中的事件监听、观察器、RAF 循环、定时器、外部脚本、媒体流、WebGL 纹理/材质/几何/渲染器及卸载后仍可能完成的异步任务。

使用方式:优先使用 Codex Browser(除非用户明确要求 Chrome),在用户指定路由的顶部、中部、页脚及移动视口做基线剖析;按 computed animationName、animationPlayState、visibility 统计 CSS 动画(含 ::before/::after),单独检查 canvas/WebGL。用 IntersectionObserver 切换 is-offscreen 类,配合 animation-play-state: paused !important 暂停离屏 CSS 动画;对 canvas/WebGL/物理循环直接控制 RAF,进入视口启动、离屏取消、重新进入恢复,并在清理时断开观察器、取消帧。内存审计可记录元素/canvas/图片/iframe 数量、可用时的 JS 堆指标、10-30 秒空闲样本与路由循环样本。

验证与限制:重跑相同剖析,目标为受测页面区块 offscreenRunningCount: 0,确认可见动画恢复、RAF 循环离屏不活跃,并执行仓库常规检查(如 git diff --check、npm run lint、npm run build)。若堆 API 返回 null 或浏览器沙箱阻止 monkey-patch,需明确说明并依赖可观察计数与源码审计;压力测试需有界,避免过度归因。资料未提供具体收费、平台支持范围与效果数据。