如何检测 CSS 动画的 FPS 值？

1. 使用浏览器开发者工具

现代浏览器的开发者工具提供了性能分析功能，可以用来检测页面的 FPS 和动画性能。这是最直接和方便的方法。

步骤：

1. 打开浏览器开发者工具（通常可以通过按 F12 或 Ctrl+Shift+I / Cmd+Option+I 打开）。
2. 选择 "Performance" 或 "Timeline" 面板。
3. 点击 "Record" 按钮开始记录，然后执行页面上的动画。
4. 停止记录后，浏览器会展示帧率、动画帧时间和其他相关信息。

通过观察帧率的图表，可以了解动画是否在60 FPS上下（通常60 FPS被认为是流畅的动画帧率），以及是否有任何掉帧现象。

2. 使用 requestAnimationFrame API

可以通过 JavaScript 使用 requestAnimationFrame 来检测动画的 FPS。requestAnimationFrame 是浏览器提供的 API，用于高效地执行动画。

示例代码：

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

function checkFPS() {
  const now = performance.now();
  frame++;
  const diff = now - lastTime;
  if (diff >= 1000) {
    const fps = frame / (diff / 1000);
    console.log(`FPS: ${fps.toFixed(2)}`);
    frame = 0;
    lastTime = now;
  }
  requestAnimationFrame(checkFPS);
}

checkFPS();

解释：

• lastTime 用于记录上一次帧时间戳。
• frame 计数器记录帧数。
• checkFPS 函数使用 requestAnimationFrame 循环调用，计算每秒的帧数。

通过这种方式，可以在控制台输出动画的实时 FPS。

3. 使用第三方工具和库

一些第三方工具和库可以帮助监测页面的 FPS 和动画性能。例如：

• Stats.js：一个轻量级的 JavaScript 库，用于监测页面的 FPS。

使用 Stats.js 的示例：

首先，引入 Stats.js 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r17/Stats.min.js"></script>

然后，在你的 JavaScript 中使用它：

const stats = new Stats();
stats.showPanel(0); // 0: fps, 1: ms (milliseconds), 2: mb (memory)
document.body.appendChild(stats.dom);

function animate() {
  stats.begin();
  // 这里放置动画相关的代码
  stats.end();
  requestAnimationFrame(animate);
}

animate();

这个库会在页面上显示一个小面板，实时显示当前的 FPS。

总结

检测 CSS 动画的 FPS 是优化网页性能的重要步骤。使用浏览器开发者工具是最简单的方法，而 requestAnimationFrame 和第三方库如 Stats.js 则提供了更定制化的检测方式。通过这些工具，可以帮助开发者分析动画的性能瓶颈，进行优化，提高用户体验。