动画性能基础：理解FPS、帧率与刷新率的关系

做GUI动画调优，第一个绕不开的概念就是FPS。很多同学一上来就问我：「老师，FPS跑到60是不是就够用了？」嗯，这个问题看似简单，但背后藏着不少门道。我先说结论：60fps确实是黄金标准，但前提是你得搞懂它为什么是60，而不是30或120。

1.1 三个核心概念：FPS、帧率、刷新率

先别急着背定义。我习惯用一句话说清楚：

• FPS（Frames Per Second）——你的应用实际每秒渲染了多少帧画面。
• 帧率（Frame Rate）——动画系统理论上每秒能生成多少帧。比如你代码里设了每秒60帧的定时器。
• 刷新率（Refresh Rate）——显示器硬件每秒刷新多少次画面。常见的有60Hz、120Hz、144Hz。

说白了，FPS是「实际产出」，帧率是「设计目标」，刷新率是「硬件上限」。三者的关系就像工厂流水线：

1.2 为什么60fps是黄金标准？

这个问题我当年刚入行时也困惑过。后来做了一款视频播放器项目，才真正理解。

原因一：人眼的视觉暂留效应

人眼对连续画面的感知有个临界点——大约每秒24帧以上，就会觉得画面是「连续」的。电影就是24fps。但电影画面有运动模糊，而GUI动画是清晰边缘的几何图形在移动，人眼对卡顿更敏感。60fps时，每帧间隔约16.67ms，这个时间短到人眼几乎察觉不到跳变。

原因二：与显示器刷新率同步

绝大多数显示器的刷新率是60Hz。如果应用FPS也是60，那么每一帧都能在显示器刷新时恰好呈现，这叫「帧同步」。我曾经遇到过FPS跑到120但显示器只有60Hz的情况——画面反而出现撕裂，因为两帧挤在一次刷新里了。

FPS	每帧耗时	人眼感受	典型场景
30	33.33ms	明显卡顿，尤其快速滑动时	低端设备、复杂页面
60	16.67ms	流畅，人眼感知不到跳变	黄金标准，大多数应用目标
120	8.33ms	极其顺滑，但需要硬件支持	高刷屏、游戏、专业工具

1.3 帧生成时间：比FPS更重要的指标

很多新手只看FPS数字。我踩过这个坑——有一次项目FPS显示59，但用户反馈卡顿。后来一查，原来是帧生成时间不均匀：大部分帧在10ms内完成，但偶尔有一帧花了50ms。平均FPS好看，但实际体验一塌糊涂。

所以，我建议你关注帧生成时间（Frame Time），而不是FPS。理想情况下，每帧耗时应该稳定在16.67ms以内（对应60fps）。如果出现超过33ms的帧，那就是一次明显的卡顿。

1.4 知识体系总览

下面这张图把本章的核心逻辑串起来了。你可以把它当作后续调优的「地图」：

1.5 实战：如何测量FPS和帧生成时间

理论说完了，来点实际的。我常用的测量工具有三个：

1. Chrome DevTools Performance面板——最全面，能看到每一帧的耗时、JS执行、布局、绘制等细节。
2. Stats.js——轻量级FPS监控库，适合嵌入到项目中实时查看。
3. requestAnimationFrame时间戳——自己写一个简单的帧时间记录器。

下面是我写的一个简易帧时间监测代码，你可以在任何项目中直接复用：

// 简易帧时间监测器
class FrameTimeMonitor {
  constructor() {
    this.frames = [];
    this.lastTime = performance.now();
    this.running = false;
  }

  start() {
    this.running = true;
    this._loop();
  }

  stop() {
    this.running = false;
  }

  _loop() {
    if (!this.running) return;

    const now = performance.now();
    const delta = now - this.lastTime;
    this.frames.push(delta);
    this.lastTime = now;

    // 只保留最近60帧的数据
    if (this.frames.length > 60) {
      this.frames.shift();
    }

    // 计算统计信息
    const avg = this.frames.reduce((a, b) => a + b, 0) / this.frames.length;
    const max = Math.max(...this.frames);
    const fps = 1000 / avg;

    console.clear();
    console.log(`平均帧耗时: ${avg.toFixed(2)}ms`);
    console.log(`最大帧耗时: ${max.toFixed(2)}ms`);
    console.log(`估算FPS: ${fps.toFixed(1)}`);
    console.log(`超过16.67ms的帧数: ${this.frames.filter(f => f > 16.67).length}`);

    requestAnimationFrame(() => this._loop());
  }
}

// 使用方式
const monitor = new FrameTimeMonitor();
monitor.start();

1.6 常见误区与避坑

• 误区一：FPS越高越好——错。FPS超过显示器刷新率反而会导致画面撕裂。我见过有人把动画帧率设到144，但显示器只有60Hz，结果用户反馈「画面在抖」。
• 误区二：只看平均FPS——错。平均FPS 55看起来不错，但如果有10%的帧耗时超过50ms，体验就是灾难。一定要看帧时间分布。
• 误区三：60fps在任何设备上都一样——错。低端设备上维持60fps的代价更高。我曾经在千元机上做动画，同样的代码在旗舰机上跑60fps，在低端机上只有20fps。这时候需要做降级策略。