文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2024-11-30 02:26

关注

背景

平时我们在打游戏的时候,都会接触到 帧数 这个名词,也就是 fsp,帧数越高,说明画面的显示更加流畅

图片

刚好最近公司的某个项目,需要实时展示网页的帧数,所以也涉及到了如何去计算帧数这个问题

如何计算?

什么是帧数呢?就是一秒内有多少帧,所以想要计算帧数的话,我们需要算出一秒内有多少帧

想要算帧,大家可以想一下用哪个 API 跟帧有关系的?

是的,那就是 requestAnimationFrame,每跑完一次requestAnimationFrame,就说明跑完一帧了,所以我们只需要计算出:一秒内跑了多少次 requestAnimationFrame 就行~

use-fsp

下面是一个初级的版本,可以实时计算出帧数

图片

可以看看页面上的效果

图片

可以看到变的非常的快,这也对于用户体验不太好,所以我们需要优化一下

图片

间隔优化

现状是每过一帧就实时计算一下,我们可以优化一下,隔几帧再计算一次帧数,这样就不会更新得太频繁了~

图片

现在就比较稳定了,没那么频繁了~

图片

来源:前端之神内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯