JS计算帧率

IT小样

已于 2023-04-10 13:41:43 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端 vue.js

于 2023-03-30 11:36:16 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_31315135/article/details/129852383

文章介绍了如何使用JavaScript的performance.now()和requestAnimationFrame来获取并计算Canvas的帧率。通过记录每一帧的时间差并存储在frameList数组中，然后通过1除以平均帧时间得到每秒帧率。文章还提供了一个示例代码片段来实现这一功能，并提到了相关参考文章链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用JS获取画布帧率

首先获取每一帧响应时间（ms）：

window.frameList = [];
let lastFrame = 0
function getFrame() {
    const now = performance.now();
    const frame = now - lastFrame;
    if (lastFrame !== 0) {
        console.log("frame", frame);
        window.frameList.push(frame);
    }
    lastFrame = now;
    requestAnimationFrame(getFrame);
}
getFrame();

帧率=帧数/时间
此时的framelist 里面就是每一帧处理的时间,记为O_time，帧率记为F;则 F = 1/O_time；单位为每毫秒帧，每秒帧率则为 F*1000；
如此通过自由换算就可以获取画布每秒帧率了
关于rqquestAnimationFrame的介绍，参照下篇文章
rqquestAnimationFrame介绍
文章链接