在 Chrome 浏览器中有多种不同的方式来计时 FPS(帧率)。以下是几个常见的方法和示例代码:
方法一:使用 requestAnimationFrame()
let fps = 0;
let lastTime = performance.now();
function updateFPS() {
const currentTime = performance.now();
const deltaTime = currentTime - lastTime;
fps = Math.round(1000 / deltaTime);
lastTime = currentTime;
// 打印当前的 FPS
console.log(fps);
requestAnimationFrame(updateFPS);
}
// 开始计时器
updateFPS();
方法二:使用 setInterval()
let fps = 0;
let frameCount = 0;
setInterval(() => {
fps = frameCount;
frameCount = 0;
// 打印当前的 FPS
console.log(fps);
}, 1000);
function animate() {
// 执行动画逻辑
// 每帧增加 frameCount
frameCount++;
// 循环动画
requestAnimationFrame(animate);
}
// 开始计时器
animate();
方法三:使用 Performance API
let fps = 0;
let frameCount = 0;
let lastTime = performance.now();
function updateFPS() {
const currentTime = performance.now();
const deltaTime = currentTime - lastTime;
frameCount++;
if (deltaTime >= 1000) {
fps = frameCount;
frameCount = 0;
lastTime = currentTime;
// 打印当前的 FPS
console.log(fps);
}
// 循环计时器
requestAnimationFrame(updateFPS);
}
// 开始计时器
updateFPS();
这些是几种常见的在 Chrome 浏览器中计时 FPS 的方法。您可以根据您的需求选择其中一种方法,并将其集成到您的代码中。