frame-rate帧率(FPS)
检查帧率、主线程长任务和掉帧,定位动态卡顿。
预览
每秒渲染的帧数;动画与显示器刷新节奏匹配时通常最流畅。
预览
深入了解
术语与辨析
frame-rate帧率(FPS)
Frame rate (FPS)英文定义
Frame rate counts rendered frames per second; matching the display refresh cadence produces the smoothest result.
中文翻译
每秒渲染的帧数;动画与显示器刷新节奏匹配时通常最流畅。
jank卡顿
Jank英文定义
Jank is a perceptible break in motion caused by irregular frame timing or delayed main-thread work.
中文翻译
浏览器无法跟上动画并发生掉帧时出现的可见停顿。
辨析
卡顿是用户看到的运动停顿;帧率是用于衡量绘制速度的指标。
dropped-frame丢帧
Dropped frame英文定义
A dropped frame occurs when rendering misses a display deadline and the previous image remains visible for another refresh.
中文翻译
浏览器未能在截止时间前绘制的一帧,会让运动出现轻微顿挫。
辨析
丢帧是一次未赶上绘制截止时间的事件;帧率汇总一段时间内的绘制频率。
实现前检查
- 目的
- 通过帧率、长任务和掉帧定位运动卡顿,并建立可复现的性能基线。
- 频率
- 在代表性设备、关键动效变更和发布前执行;高风险页面纳入持续监测。
- 触发
- 由性能录制、自动基准或真实用户监测触发,覆盖冷启动和稳定状态。
- 进入 / 离开
- 指标面板即时更新,不使用会干扰测量结果的装饰入场动画。
- 可打断性
- 录制可随时停止并保留样本;重复测试使用同一脚本和设备条件。
- 手势与键盘
- 滚动、拖拽和点击测试使用一致手势轨迹,自动化与人工路径相互校验。
- 减弱动效策略
- 分别测试默认与 reduced-motion 模式,确认低动态路径也没有长任务。
可访问性
减弱动效
分别测试默认与 reduced-motion 模式,确认低动态路径也没有长任务。
交付前检查
- 区分帧率、单次丢帧和可见卡顿。
- 在 60Hz 与高刷新率设备上记录目标。