Web前端计算FPS：使用原生requestAnimationFrame API

Window.requestAnimationFrame()

贴一下MSDN的说明：

The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.
//大致意思是: requestAnimationFrame()的参数是一个回调函数, 浏览器引擎会在下一次的页面重绘之前调用它;

使用原生JS来测试一下本地机器的FPS：

1. 创建一个`test.html`文件，内容如下：

<div>当前FPS: <span id="fps"></span><br><button onclick="showFPS('fps')">点我开始测试FPS</button>
</div><script>function showFPS(id) {let requestAnimationFrame =window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||window.oRequestAnimationFrame ||window.msRequestAnimationFrame ||function (callback) {window.setTimeout(callback, 1000 / 60);};let st = Date.now();let tt;let fps = 0;let frame = 0;let calcFPS = function () {(function loop() {tt = Date.now()if (tt > st + 1000) {fps = Math.round((frame * 1000) / (tt - st));st = Date.now();frame = 0;document.getElementById(id).innerHTML = fps;}frame++;requestAnimationFrame(loop);})();}calcFPS();}</script>

2. 浏览器打开后点击button进行测试

Web前端计算FPS：使用原生requestAnimationFrame API相关推荐

【响应式Web前端设计】H5原生表单验证
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
好程序员web前端教程分享JavaScript验证API
好程序员web前端教程分享JavaScript验证API,小编每天会分享一下干货给大家.那么今天说道的就是web前端培训课程中的章节. JavaScript验证API 约束验证DOM方法 Proper ...
web前端培训分享Electron之Main Process API
本节由千锋web前端培训机构讲师给大家分享Electron使用指南之Main Process API,Electron API (Electron API 有三种) Main Process (主进进 ...
面向 Web 前端的原生语言总结手册
这一系列文章旨在让具有 Web 前端背景的开发者快速上手原生语言. 背景与动机从 WebView 到 Hybrid 再到 React Native,移动端主流技术方案中前端同学的施展空间越来越大.但 ...
web前端JavaScript嵌入百度地图API的方法最详细
web前端JavaScript嵌入百度地图API最详细的方法一.申请成为百度开发者,获得使用地图API接口的权限,获取(AK)码. 二.实现首图效果(可以参考开发者指南) 1. 根据Hello Wo ...
纯Web前端打造的元宇宙展厅——开箱即用的Lingo3D游戏引擎支持原生、React、Vue
Lingo3D 一款新出的开源框架,主要目的是用来做游戏引擎的,对标端游PUBG 因公司业务需求不同,跟着教程做了一款纯展示的展厅性质的Demo(React) 近几年元宇宙的概念有点热门,这里亦可沾点 ...
webform计算某几列结果_1+x 证书 Web 前端开发初级实操考试（试卷5 ）
本文编写于 439 天前,最后修改于 366 天前,其中某些信息可能已经过时. Web前端开发初级模拟测试卷(五) PDF版点击查看共55道题总分:200分一.单选题共30题,60分 1.在弹性 ...
如何才能成为一名合格的web前端开发工程师
如何才能成为一名合格的web前端开发工程师开篇前端开发是一个非常特殊的行业,它的历史实际上不是很长,但是知识之繁杂,技术迭代速度之快是其他技术所不能比拟的. winter在他的<重学前端&g ...
【理论面试篇】收集整理来自网络上的一些常见的经典前端、H5面试题 Web前端开发面试题...
##2017.10.30收集面试技巧 5.1 面试形式 1) 一般而言,小公司做笔试题:大公司面谈项目经验:做地图的一定考算法 2) 面试官喜欢什么样的人 ü 技术好. ...
web前端岗面经大全
文章目录 html篇 HTML语义化前端优化的解决方案 HTML5新特性常见浏览器兼容问题 meta标签 CSS篇行内元素.行内块元素.块元素 css选择器 px.em.rem的区别 BFC 盒 ...

Web前端计算FPS：使用原生requestAnimationFrame API

Window.requestAnimationFrame()

使用原生JS来测试一下本地机器的FPS：

1. 创建一个`test.html`文件，内容如下：

2. 浏览器打开后点击button进行测试

Web前端计算FPS：使用原生requestAnimationFrame API相关推荐

最新文章

热门文章

Web前端计算FPS：使用原生requestAnimationFrame API

Window.requestAnimationFrame()

使用原生JS来测试一下本地机器的FPS：

1. 创建一个test.html文件，内容如下：

2. 浏览器打开后点击button进行测试

Web前端计算FPS：使用原生requestAnimationFrame API相关推荐

最新文章

热门文章

1. 创建一个`test.html`文件，内容如下：