【前端性能】Web 动画帧率(FPS) 计算
2023-07-28 本文已影响0人
jia林
FPS,是 frames per second 的缩写,也就是一秒渲染了多少帧的画面。对于浏览器来说,通常 fps 为 60。
FPS = 一秒的帧数 / 1s
主要都是利用了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)
}
);