CSS 动效别只盯帧率还要看输入延迟和内存只盯帧率最容易得到一份看起来很绿的报告。短时间跑到 60fps不等于没有长任务、内存增长或输入延迟。画布和持续运行的粒子尤其会“后劲发作”问题往往要多跑几个交互周期才冒出来。先记录三类现象输入发生后多久出现下一次绘制。它比“平均帧率”更接近用户的手感。Performance 面板里是否有连续的脚本、样式、绘制或合成长任务。内存曲线在重复进入、离开页面后能否回落。不能回落时再检查监听器、计时器和缓存。用样本说话在目标设备上选择固定交互进入页面、运行一段时间、滚动、离开再进入。记录同一版本前后的 trace而不是只截一张 DevTools 图。线上监控也要采样避免每一帧都上报。let previous performance.now(); function sample(now) { const interval now - previous; previous now; if (interval 50) reportAnimationGap(interval); requestAnimationFrame(sample); } requestAnimationFrame(sample);示例只记录帧间隔实际接入还要限制采样时长、处理页面隐藏并确认上报内容不含页面文本、用户输入或可识别信息。不要把指标当裁判阈值应该由业务路径和设备范围决定。性能数据负责把问题缩小到“哪一段、在什么条件下”最后仍需结合 trace 与代码判断。这样调 CSS 动效才不会为了一个数字牺牲交互本身。