1、动画性能基础：理解帧率(FPS)与刷新率(Hz)的关系
做前端动画优化这么多年，我见过太多人把「卡顿」归咎于代码写得烂。其实很多时候，问题出在没搞懂最基础的两个概念——帧率和刷新率。今天咱们就把这事彻底说清楚。
1.1 帧率(FPS)是什么？
FPS，全称 Frames Per Second，每秒传输帧数。说白了，就是你的动画每一秒能画出多少张画面。
举个例子：
一部电影是 24fps，意思是每秒闪过 24 张静态图。
一个游戏跑 60fps，就是每秒更新 60 次画面。
帧率越高，动画看起来就越流畅。但这里有个关键问题——帧率不是越高越好，而是越稳定越好。
核心观点：60fps 之所以成为黄金标准，不是因为人眼只能看到 60 帧，而是因为 60fps 与大多数显示器的刷新率完美匹配，能带来「丝滑」的视觉体验。
1.2 刷新率(Hz)又是什么？
刷新率是显示器的事。它表示屏幕每秒钟能刷新多少次画面。常见的显示器有 60Hz、120Hz、144Hz。
我打个比方你就懂了：
帧率是「画家画画的快慢」，刷新率是「画框换画的快慢」。
画家画得再快，画框换得慢，你也看不到新画。
| 概念 | 主体 | 含义 | 常见值 |
|---|---|---|---|
| 帧率 (FPS) | 浏览器/应用 | 每秒生成多少帧画面 | 30、60、120 |
| 刷新率 (Hz) | 显示器 | 每秒刷新多少次屏幕 | 60、120、144 |
1.3 帧率与刷新率的匹配关系
这两者必须匹配，否则就会出现视觉问题。
- 帧率 > 刷新率：多余的帧会被丢弃，造成画面撕裂（tearing）。
- 帧率 < 刷新率：显示器会重复显示上一帧，造成卡顿感（jank）。
- 帧率 = 刷新率：完美匹配，每一帧都能被及时显示。
我在项目中遇到过最典型的案例：一个 H5 游戏在 60Hz 显示器上跑 120fps，结果用户反馈画面撕裂。后来加了垂直同步（V-Sync），把帧率锁定在 60fps，问题就解决了。
避坑指南：我曾经在优化一个长列表滚动动画时，发现帧率稳定在 55-58fps，但用户还是觉得「有点卡」。后来排查发现，显示器是 60Hz，帧率波动导致部分帧被重复显示。解决方案不是提升帧率，而是让帧率更稳定。
1.4 为什么 60fps 是黄金标准？
原因有三：
- 硬件普及率：绝大多数显示器和手机屏幕都是 60Hz，60fps 刚好匹配。
- 人眼感知阈值：大部分人能明显感知到 30fps 以下的卡顿，但 60fps 以上再提升，感知差异就很小了。
- 性能成本：从 30fps 提升到 60fps，性能开销翻倍；从 60fps 提升到 120fps，开销再翻倍。但收益递减。
我的建议：做动画优化时，先确保稳定达到 60fps，再考虑更高帧率。不要为了跑 120fps 而牺牲稳定性，那得不偿失。
1.5 人眼视觉暂留效应
这个效应是动画能「动起来」的生理基础。简单说：人眼看到一幅画面后，图像会在视网膜上停留约 1/24 秒。
所以当连续画面以足够快的速度切换时，大脑会把它们「脑补」成连续运动。这就是为什么电影用 24fps 就能让你觉得画面是流畅的。
但注意：视觉暂留效应只能解释「为什么能感知到运动」，不能解释「为什么 60fps 比 30fps 更流畅」。后者涉及的是人眼对运动模糊和闪烁的敏感度。
我记得刚入行时，有个同事非说「人眼只能看到 30fps，做 60fps 是浪费」。后来我让他盯着 30fps 和 60fps 的滚动页面对比，他自己就改口了。你想想看，要是人眼只能看到 30fps，那 144Hz 的显示器卖给谁？
1.6 知识体系总览
下面这张图把本章的核心逻辑串起来了，建议你多看几遍。
1.7 小结
这一章咱们把最基础的东西理清了：
- 帧率是浏览器的事，刷新率是显示器的事。
- 两者必须匹配，否则就会出现撕裂或卡顿。
- 60fps 是黄金标准，因为硬件普及、人眼感知、性能成本三者平衡。
- 视觉暂留效应是动画能「动起来」的生理基础，但不是流畅度的决定因素。