为什么帧率达到60fps页面就流畅？

我们平时在做性能优化的时候，经常会提到一个指标就是页面帧率达到60fps，但是这个判断值60是怎么来的呢?为什么不是50或者70fps？

带着这个问题查阅了一些网络资料，并整理成下文：

人眼的感知极限不是60fps

有人说可能是人眼的感知极限就是60fps，60hz对人眼识别来说已经具备较高的平滑度，但是通过查阅百科得知85hz是人类大脑处理视频的极限，人眼无法分辨更高频率的差异。

画面帧率越高，体验越好

人眼在看画面时，画面帧率高于每秒10-12帧的时候，就会认为是连贯的。
一般电影的拍摄及播放帧数是每秒24帧。

目前显示性能优化的极限是60fps

有人会说：既然你说画面帧率越高，用户体验越好，那为什么页面性能优化做到60fps就可以了？ 这是由于我们使用的设备引起的。

从机器的构造来说，生成图像的设备（如显卡）和显示图像的设备（显示器）是分离的。

显示器的刷新频率是固定的

目前， 大多数显示器根据其设定按 30Hz、 60Hz、 120Hz 或者 144Hz 的频率进行刷新。 而其中最常见的刷新频率是 60 Hz。 这样做是为了继承以前电视机刷新频率为 60Hz 的设定。

显卡生成图像的频率是变化的

显卡内图片的真正提供者是GPU，而这导致了另一个问题，由于 GPU 生成图像的频率与显示器刷新的频率是不相关的，那么在显示器刷新时，GPU 没有准备好需要显示的图像怎么办；或者 GPU 的渲染速度过快，显示器来不及刷新，GPU 就已经开始渲染下一帧图像又该如何处理？
如果解决不了这两个问题，就会出现上图中的屏幕撕裂（Screen Tearing）现象，屏幕中一部分显示的是上一帧的内容，另一部分显示的是下一帧的内容。

我们用两个例子来说明可能出现屏幕撕裂的两种情况：

如果显示器的刷新频率为 75 Hz，GPU 的渲染速度为 100 Hz，那么在两次屏幕刷新的间隔中，GPU 会渲染 4/3 个帧，后面的 1/3 帧会覆盖已经渲染好的帧栈，最终会导致屏幕在 1/3 或者 2/3 的位置出现屏幕撕裂效果；
那么 GPU 的渲染速度小于显示器呢，比如说 50 Hz，那么在两次屏幕刷新的间隔中，GPU 只会渲染 2/3 帧，剩下的 1/3 会来自上一帧，与上面的结果完全相同，在同样的位置出现撕裂效果。
到这里，有人会说，如果显示器的刷新频率与 GPU 的渲染速度完全相同，应该就会解决屏幕撕裂的问题了吧？其实并不是。显示器从 GPU 拷贝帧的过程依然需要消耗一定的时间，如果屏幕在拷贝图像时刷新，仍然会导致屏幕撕裂问题。

如何解决屏幕撕裂问题？
解决屏幕撕裂中最知名可能也是最古老的解决方案就是 V-Sync 技术。
V-Sync 的原理简单而直观：产生屏幕撕裂的原因是显卡在屏幕刷新时进行了渲染，而 V-Sync 通过同步渲染/刷新时间的方式来解决这个问题。显示器的刷新频率为 60 Hz，若此时开启 V-Sync，将控制显卡渲染速度在 60 Hz 以内以匹配显示器刷新频率。这也意味着，在 V-Sync 的限制下，显卡显示性能的极限就限制为 60 Hz 以内。

因此在屏幕的刷新频率基本固定的情况下，我们只能控制GPU的渲染速度往60fps上靠拢。