SuperAPI AI 工具集

elite-performance

通用与其它

查看项目

更新于 10-16 02:30

技能介绍

用途:面向高端动画网站的性能优化,目标是在保持 60fps 动画的同时达成 Core Web Vitals 指标。

主要能力:提供 Vite 配置、动画性能、资源优化、调试四类参考文件(vite-setup.md、animation-performance.md、asset-optimization.md、debugging.md)。给出 2026 性能预算:LCP ≤2.5s、INP ≤200ms、CLS ≤0.1;动画 60fps(16.67ms/帧)、JS/布局帧预算 <10ms、动画启动 <100ms、滚动零丢帧;初始 JS <100KB(gzip)、初始 CSS <50KB、GSAP 核心约 25KB、初始总量 <200KB。

必要用法:只动画 GPU 合成属性(transform、opacity、filter),避免 width/height/top/left/margin/padding/font-size/border-width 及 background-color、color、box-shadow 等触发布局或重绘的属性;用 transform 替代 left 等定位属性。常用手段包括原生懒加载、content-visibility、contain、prefers-reduced-motion、passive 滚动监听、ScrollTrigger 批量与懒创建、gsap.context() 清理、动态 import 按需加载插件、关键 CSS 内联与资源 preload、defer 脚本、AbortController 清理监听器。

适用场景:使用 GSAP/ScrollTrigger 等动画库的营销页、作品集与高端品牌站点,需要兼顾视觉动效与加载、交互、滚动性能。

限制:资料未提供具体安装命令、版本要求、收费与平台信息;性能预算为文档给出的目标值,实际效果取决于项目实现。