可以通过计算每秒 window.requestAnimationFrame 的调用频率来做为 FPS 值。它接收一个回调函数,该回调函数会在浏览器下一次重绘之前执行。所以只要我们循环调用并记录单位时间内的调用次数就能计算当前页面的帧率了。

效果展示

在线预览 - 使用 JavaScript 获取当前页面帧率 FPS

实现代码

html:

<p>当前FPS:<span id="fps"></span></p>

js:

let last = Date.now();
let ticks = 0;
//循环调用 requestAnimationFrame
function rafLoop(timestamp) {
ticks += 1;
//每30帧统计一次帧率
if (ticks >= 30) {
const now = Date.now();
const diff = now - last
const fps = Math.round(1000 / (diff / ticks));
last = now
ticks = 0
renderFps(fps);// 刷新帧率数值
}
requestAnimationFrame(rafLoop);
} let fpsEl = document.getElementById('fps');
//显示帧率数值到界面上
function renderFps(fps) {
fpsEl.textContent = fps;
} //开始执行
rafLoop();

如何使用 JavaScript 获取当前页面帧率 FPS的更多相关文章

  1. javascript 获取父页面中元素对象方法

    父页面中: <input type="hidden" id="areaID" value="test1"> <iframe ...

  2. JavaScript获取HTML页面源代码

    来自:http://www.cnblogs.com/luckbird/archive/2008/02/01/1061048.html <a href="javascript:gets( ...

  3. javascript获取对应页面的代码

    window.onload = function () { function getUrls(url) {//核心代码是url2这行代码,通过.replace()方法将对应的字符串替换成其他方式 va ...

  4. JavaScript - 获取当前页面某个节点的个数

    document.getElementsByTagName(<tag_name>).length;

  5. javascript获取当前url中的參数

    javascript获取当前页面url中的參数能够使用location的search方法,获取到的是url中?后面的部分,比如http:localhost:8080/Manager/index.jsp ...

  6. 详细解析 JavaScript 获取元素的坐标

    引言 最近突然看到了有关图片懒加载的问题,大致意思就是初始状态下页面只加载浏览器可视区域的图片,剩余图片在当浏览器可视区域滚动到其位置时才开始加载.貌似现在许多大型网站都有实现懒加载,所以我便就此问题 ...

  7. JavaScript从父页面获取子页面的值(子页面又如何访问父页面)

    之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...

  8. 使用JavaScript设置、获取父子页面中的值

    一:获取父页面中的值 有二种方法windows.open()和windows.showModalDialog() 1.windos.open(URL,name,reatures,replace) 再父 ...

  9. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  10. 用JavaScript获取页面上被选中的文字的技巧

    这里介绍的一个小技巧是如何用JavaScript获取页面上被选中的文字的方法.最关键的JavaScript API是: event.selection = window.getSelection(); ...

随机推荐

  1. go~istio加载wasm的步骤

    参考 https://github.com/higress-group/proxy-wasm-go-sdk/tree/main/proxywasm https://github.com/tetrate ...

  2. 【直播回顾】OpenHarmony知识赋能五期第三课——多媒体整体介绍

    5月5日晚上19点,知识赋能第五期第三节课<OpenHarmony标准系统多媒体子系统整体介绍>,在OpenHarmony开发者成长计划社群内成功举行. 本期课程,由深开鸿资深技术专家郭岳 ...

  3. Java 构造函数与修饰符详解:初始化对象与控制权限

    Java 构造函数 Java 构造函数 是一种特殊的类方法,用于在创建对象时初始化对象的属性.它与类名相同,并且没有返回值类型. 构造函数的作用: 为对象的属性设置初始值 执行必要的初始化操作 提供创 ...

  4. Spring Boot 嵌入式服务器、Hibernate 关系和 Spring Data 全解析

    嵌入式服务器 Spring Boot 的嵌入式服务器功能是一项方便而强大的功能,它允许你在应用程序中直接运行 Web 服务器,无需将其部署到单独的独立 Web 服务器中.这使得开发.测试和部署 Web ...

  5. Android Compose 入门,深入底层源码分析

    Android Compose 入门,深入底层源码分析 我是跟着AS官网学习的,但是官方的教程写的不是很详细.官网链接 首先创建一个Compose项目,目录结构是这样: ui -> theme ...

  6. C++ 获取数组大小、多维数组操作详解

    获取数组的大小 要获取数组的大小,可以使用 sizeof() 运算符: 示例 int myNumbers[5] = {10, 20, 30, 40, 50}; cout << sizeof ...

  7. DevEco Device Tool 3.0 Release带来5大能力升级,让智能设备开发更高效

    原文:https://mp.weixin.qq.com/s/QYlHUU05BDlzVxbfZbiKOg,点击链接查看更多技术内容. DevEco Device Tool是面向智能设备开发者提供的一站 ...

  8. 演示webuploader和cropperjs图片裁剪上传

    最近有个项目要在浏览器端裁剪并上传图片.由于缺乏人力,只能我上阵杀敌.通过参考各种文章,最后决定用cropperjs进行图片裁剪,用webuploader上传文件.本文涉及到的知识至少有Java基础. ...

  9. docker 应用篇————docker 网络[十七]

    前言 简单介绍一下docker 网络. 正文 使用ip addr. 可以看到网络. 有一个虚拟网卡: 那么基本上容器就处于这样的模式了. 那么也就是所有容器都在同一网关下面了. 那么问题来了,理论上容 ...

  10. leetcode每日一题:409. 最长回文串

    409. 最长回文串 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串. 在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意 ...