用途:当界面出现可测量的卡顿或加载缓慢时使用,覆盖合成、布局抖动、虚拟化、图片加载与包体积等方向。它由测量结果触发,而非主观感觉;若只是动效观感不对,应交给动效时长与缓动处理。
主要能力:提供性能预算参考(帧时间、Web Vitals 阈值、列表规模、图片与包体积)和症状诊断参考(把症状映射到面板、设置与 trace 特征)。核心原则包括:只过渡明确属性而非 transition: all;只动画合成器可接管的 transform、opacity、filter、clip-path;will-change 仅用于已观测到的首帧卡顿;约 50 行以上列表做虚拟化;避免每帧 useState 或父级自定义属性写入;图片视频预留尺寸或 aspect-ratio;离屏工作暂停;先减少 JavaScript 再谈加速;主题切换禁用过渡。
使用方式:先采用项目已有的性能工具(虚拟化器、图片组件、包分析器、Vitals 上报),不要新增第二套。按需打开 references/budgets.md 与 references/diagnosis.md。输出发现时须附带测量:测什么→设备与限速→优化前数值→trace 中的原因→修复→优化后数值,并按用户可见成本排序。
适用场景:列表滚动卡顿、面板展开动画掉帧、图片导致布局偏移、字体未预加载、图标整包引入、主题切换涂抹感等。
限制:不在未做性能分析前优化;不在开发机上评估,需中端设备或 CPU 限速;content-visibility: auto 会破坏部分引擎的页内查找与锚点滚动,正文慎用;Framer Motion 的 x、y、scale 简写非硬件加速,需在自身版本 profile 验证后再改写。资料未提供具体安装命令、收费与平台信息。