写一个 Vue3 Hooks，准确计算网页的帧数 FPS

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心~YpL28资讯网——每日最新资讯28at.com

背景

平时我们在打游戏的时候，都会接触到 帧数 这个名词，也就是 fsp，帧数越高，说明画面的显示更加流畅YpL28资讯网——每日最新资讯28at.com

图片YpL28资讯网——每日最新资讯28at.com

刚好最近公司的某个项目，需要实时展示网页的帧数，所以也涉及到了如何去计算帧数这个问题YpL28资讯网——每日最新资讯28at.com

如何计算？

什么是帧数呢？就是一秒内有多少帧，所以想要计算帧数的话，我们需要算出一秒内有多少帧YpL28资讯网——每日最新资讯28at.com

想要算帧，大家可以想一下用哪个 API 跟帧有关系的？YpL28资讯网——每日最新资讯28at.com

是的，那就是 requestAnimationFrame，每跑完一次requestAnimationFrame，就说明跑完一帧了，所以我们只需要计算出：一秒内跑了多少次 requestAnimationFrame 就行~YpL28资讯网——每日最新资讯28at.com

use-fsp

下面是一个初级的版本，可以实时计算出帧数YpL28资讯网——每日最新资讯28at.com

图片YpL28资讯网——每日最新资讯28at.com

可以看看页面上的效果YpL28资讯网——每日最新资讯28at.com

图片YpL28资讯网——每日最新资讯28at.com

可以看到变的非常的快，这也对于用户体验不太好，所以我们需要优化一下YpL28资讯网——每日最新资讯28at.com

图片YpL28资讯网——每日最新资讯28at.com

间隔优化

现状是每过一帧就实时计算一下，我们可以优化一下，隔几帧再计算一次帧数，这样就不会更新得太频繁了~YpL28资讯网——每日最新资讯28at.com

图片YpL28资讯网——每日最新资讯28at.com

现在就比较稳定了，没那么频繁了~YpL28资讯网——每日最新资讯28at.com

图片 YpL28资讯网——每日最新资讯28at.com

本文链接：http://www.28at.com/showinfo-26-67846-0.html写一个 Vue3 Hooks，准确计算网页的帧数 FPS

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇： 2024年的Rust与Go，你看明白了吗？

下一篇： 都 2024 年了，该如何搭建新的 React 项目？