chrome的Rendering面板中的FPS meter可以实时查看当前页面的FPS(frames per second)和简单的GPU信息. 但是：它只在某一帧发生变化时才会计数，如果啥都不干，js主线程是空闲的，帧率会很低-按我的理解也就是不太准，我们可以自己实现查看当前页面帧率的函数。
下面列举了JavaScript查看FPS的几种方式,主要都是利用了requestAnimationFrame，使浏览器在下次重绘之前执行回调
1 使用requestAnimationFrame结合performance
const times = []; // 存储当前的时间数组
let fps;
function refreshLoop() {
window.requestAnimationFrame(() => {
const now = performance.now(); // 使用performance.now()能获取更高的精度
while (times.length > 0 && times[0] <= now - 1000) {
times.shift(); // 去掉1秒外的时间
}
times.push(now);
fps = times.length;
refreshLoop();
console.log(fps);
});
}
refreshLoop();
2 使用requestAnimationFrame
var before,now,fps;
before=Date.now();
fps=0;
requestAnimationFrame(
function loop(){
now=Date.now();
fps=Math.round(1000/(now-before));
before=now;
requestAnimationFrame(loop);
console.log("fps",fps)
}
);
3 使用requestAnimationFrame2 配置进度条
html
<progress id="kpFps" value="0" min="0" max="100" style="vertical-align:middle"></progress>
javascript
let be = Date.now(),fps=0;
requestAnimationFrame(
function loop(){
let now = Date.now()
fps = Math.round(1000 / (now - be))
be = now
requestAnimationFrame(loop)
if (fps < 35){
kFps.style.color = "red"
kFps.textContent = fps
} if (fps >= 35 && fps <= 41) {
kFps.style.color = "deepskyblue"
kFps.textContent = fps + " FPS"
} else {
kFps.style.color = "black"
kFps.textContent = fps + " FPS"
}
kpFps.value = fps
}
)
怎么用？
- 打开你想要测试的web，把上面的代码copy到控制台执行
- 或者放到你的web中的js中
