<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>FPS 计算示例</title>
<style>
#fpsCounter {
position: fixed;
top: 10px;
left: 10px;
padding: 5px 10px;
background: rgba(0, 0, 0, 0.7);
color: #0f0;
font-family: Arial, sans-serif;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="fpsCounter">FPS: 0</div>

    <script>
      let lastTime = performance.now();
      let frame = 0;
      let fps = 0;
      let lastFpsUpdate = performance.now();

      function update() {
        const now = performance.now();
        frame++;
        const delta = now - lastFpsUpdate;

        if (delta >= 1000) {
          // 每1000毫秒更新一次FPS
          fps = (frame / delta) * 1000;
          document.getElementById(
            "fpsCounter"
          ).textContent = `FPS: ${fps.toFixed(2)}`;
          frame = 0;
          lastFpsUpdate = now;
        }

        requestAnimationFrame(update);
      }

      // 开始动画循环
      requestAnimationFrame(update);
    </script>
  </body>
</html>