1. 动画基础原理：帧率、刷新率与视觉暂留
做动画优化，首先得搞懂几个最基础的概念。我见过不少同学一上来就追着问「怎么让动画跑满 120fps」，结果连帧率和刷新率的区别都说不清楚。嗯，这不行。咱们先把地基打牢。
1.1 视觉暂留效应——动画的「骗术」根源
说白了，动画就是一连串静止画面快速切换，让你的大脑误以为物体在动。这个错觉的生理基础叫「视觉暂留效应」。
人眼看到一幅画面后，光信号会在视网膜上停留大约 1/16 到 1/24 秒。如果下一幅画面在这段时间内出现，大脑就会把它们「粘」在一起，形成连续运动的幻觉。
关键数字：视觉暂留的临界点大约在 10~12 帧/秒。低于这个值，人眼就能明显感知到画面切换的「卡顿感」。电影标准 24fps，就是基于这个原理定下来的。
我在做早期 H5 动画时踩过一个坑：为了省性能，把帧率压到了 15fps。结果用户反馈「画面一抖一抖的」。后来才意识到，15fps 虽然高于 12fps 的临界点，但每帧间隔 66ms，远大于视觉暂留的残留时间。说白了，就是骗不过眼睛。
1.2 帧率（FPS）——你的动画「产粮」速度
帧率，全称 Frames Per Second，指每秒能渲染出多少帧画面。60fps 就是每秒 60 帧，每帧间隔约 16.67ms。
帧率取决于两个环节：
- 逻辑计算：JavaScript 执行、布局计算、样式重算
- 渲染管线：Paint、Composite、GPU 提交
任何一个环节超时，帧率就会掉。我习惯把帧率看作「产粮速度」——你的应用每秒能「生产」多少帧画面给屏幕去显示。
我的经验：用 Chrome DevTools 的 Performance 面板看帧率时，别只看平均值。重点关注「长帧」——那些超过 50ms 的帧才是真正的卡顿元凶。我曾经优化过一个列表滚动动画，平均帧率 55fps 看起来很漂亮，但每 3 秒就跳一个 120ms 的长帧，用户体感就是「时不时卡一下」。
1.3 刷新率——屏幕的「吃饭」速度
刷新率是屏幕硬件参数，指屏幕每秒能刷新多少次画面。常见的 60Hz、90Hz、120Hz，说的就是这个。
刷新率和帧率的关系，我打个比方：
- 刷新率 = 屏幕「吃饭」的速度，每秒能吃 60 口（60Hz）或 120 口（120Hz）
- 帧率 = 你的应用「做饭」的速度，每秒能做 60 道菜（60fps）或 120 道菜（120fps）
如果做饭速度跟不上吃饭速度，屏幕就得「吃剩饭」——重复显示上一帧。这就是视觉上的卡顿或撕裂。
| 场景 | 帧率 vs 刷新率 | 用户体感 |
|---|---|---|
| 帧率 > 刷新率 | 做饭太快，屏幕吃不下 | 画面撕裂（tearing），部分帧被丢弃 |
| 帧率 = 刷新率 | 完美匹配 | 最流畅，无卡顿无撕裂 |
| 帧率 < 刷新率 | 做饭太慢，屏幕空等 | 卡顿、跳帧、不跟手 |
注意：帧率超过刷新率并不一定是好事。比如 60Hz 屏幕上跑 120fps，屏幕每 16.67ms 才刷新一次，而你的应用每 8.33ms 就产出一帧。多出来的那帧根本显示不出来，反而浪费了 CPU/GPU 资源。我曾经见过一个团队为了「跑满 120fps」疯狂优化，结果测试机是 60Hz 屏幕——白忙活一场。
1.4 60fps vs 120fps——差异到底在哪？
咱们直接上对比表：
| 维度 | 60fps | 120fps |
|---|---|---|
| 每帧预算 | 16.67ms | 8.33ms |
| 视觉流畅度 | 日常使用足够 | 明显更顺滑，尤其快速滚动/动画 |
| 功耗 | 基准 | 约增加 30%~50% |
| 硬件要求 | 中低端设备可胜任 | 需要高刷屏 + 强 GPU |
| 人眼感知 | 无明显卡顿 | 「如丝般顺滑」的体验 |
你可能会问：「60fps 已经很流畅了，为什么还要追求 120fps？」
原因有两个：
- 快速运动场景下差异巨大。 比如列表快速滚动、游戏镜头旋转、拖拽缩放。60fps 下每帧间隔 16.67ms，物体移动距离大，人眼能感知到「跳变」；120fps 把间隔砍到 8.33ms，运动轨迹更连续。
- 触控跟手性。 120Hz 屏幕的触控采样率通常也更高（240Hz 甚至 360Hz），手指滑动到画面响应的延迟更低。我做手势交互优化时测过，60Hz 下触控到画面响应延迟约 30~50ms，120Hz 下能压到 10ms 以内。这个差距，用户一摸就知道。
我的建议：不要盲目追求 120fps。如果你的目标用户群以中低端设备为主，老老实实优化到 60fps 稳定输出，比偶尔蹦到 120fps 但频繁掉帧强得多。我在一个电商项目中就吃过这个亏——为了上 120fps 用了大量 GPU 合成层，结果千元机直接卡成 PPT。
1.5 知识体系总览
下面这张图把本章的核心逻辑串起来了：
1.6 小结
这一章咱们把动画流畅度的三个根基理清了：
- 视觉暂留效应是动画能「骗过」人眼的生理基础，临界点在 10~12fps
- 帧率是你的应用每秒能渲染多少帧，60fps 下每帧只有 16.67ms 的预算
- 刷新率是屏幕硬件的刷新能力，帧率必须匹配刷新率才能避免卡顿和撕裂
- 60fps vs 120fps：120fps 在快速运动和触控跟手性上有明显优势，但功耗和硬件要求也更高
我个人习惯在开始任何动画优化之前，先用 Performance 面板跑一遍，看看当前帧率曲线。如果连 60fps 都稳不住，就别谈 120fps 了。先把基础打好，后面的优化技巧才能派上用场。