Question

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

Answer 1

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

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

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

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

有人会说：既然你说画面帧率越高，用户体验越好，那为什么页面性能优化做到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上靠拢。