我正在测量动画的性能。当我使用以下代码测量 FPS 时，它与 Chrome Frame 渲染统计不一致。let lastTime = performance.now();let lastFrameTime =

我正在测量动画的性能。当我使用以下代码测量 FPS 时，它与 Chrome Frame 渲染统计数据不一致。

let lastTime = performance.now();
let lastFrameTime = performance.now();
let frame = 0;
let fps = 0;

const loop = function () {
  const now = performance.now();
  const fs = now - lastFrameTime;
  lastFrameTime = now;
  frame++;
  if (now > 1000 + lastTime) {
    fps = Math.round((frame * 1000) / (now - lastTime));
    frame = 0;
    lastTime = now;
    //If delete this statement, the stats is incorrect
    el.innerText = "FPS: " + fps;
    console.log(fps);
  }
  window.requestAnimationFrame(loop);
};
loop();

找到原因了，如果删除 el.innerText = "FPS: " + fps ，结果就不对了，点此 查看 demo。

复制

1. 打开控制台（单击右上角图标“Chrome DevTools 用于预览”）
2. 点击预览右上方切换按钮。（页面FPS和控制台FPS一致）
3. 删除代码 el.innerText = "FPS: " + fps;
4. 重复1和2 控制台的FPS是 错误的 .