在前端性能优化中，页面流畅度是一个重要的指标。流畅度又需要用FPS来衡量，较低的FPS可能导致页面卡顿、动画不流畅，给用户带来不良的使用体验。因此，提高FPS是前端性能优化的一个关键目标
1、什么是FPS？
Frames Per Second：每秒帧数
桢：单个静止的图像
例：如果一个视频的帧率为30FPS（帧/秒），意味着每秒播放30个不同的图像。
在ps，可以查看gif图的每一帧
2、页面流畅的标准是多少FPS
理论上说，FPS越高图像的变化就越流畅，那对于前端页面来说多高叫高
计算机领域中，60FPS是常见的标准
1、显示图像的设备（如显示器）刷新率大多是 60Hz（电力系统的频率决定的，美国交流电频率是60Hz）
查看显示屏刷新率
2、对于人眼感知来说，60fps已经足够流畅
3、更高的帧率需要更高的硬件成本，技术进步有些显示器已经支持120Hz甚至更高
3、页面显示机制
上面说到，显示器1s刷新60次，16.7ms刷新一次，如下图
如果页面在交互过程中能和设备保持一致，用户就不会感觉卡顿，也就是每一次渲染要在16.7ms完成，才不会掉帧
4、浏览器在16ms内要完成的工作
下图为浏览器运行的单个帧的渲染流水线，称为像素管道，如果其中的某个环节执行时间过长就会导致卡顿。
并不是所有的样式改动都会经历这五个步骤，例如,只是修改元素的颜色Layout可以跳过
像素管道是作为开发者能够掌握的对帧性能有影响的部分，其他部分由浏览器掌握，我
们无法控制。我们的目标就是就是尽快完成这些环节，以便达到 60FPS 的目标。
参考文章
zhuanlan.zhihu.com/p/66398148/…
附
chrome dev tools 查看fps
ctrl+shift+p ,输入 frames
查看显示器刷新率
右键-显示设置-高级显示设置
