面试题：如何检测 CSS 动画的 FPS 值？

这是一个非常深入且专业的前端性能面试题，考察对浏览器渲染机制、性能分析工具和动画优化的理解。

核心要点：FPS（Frames Per Second，每秒帧数）是衡量动画流畅度的关键指标。

理想的动画 FPS 应为 60（与大多数显示器的刷新率匹配）。检测 CSS 动画的 FPS 并非通过 CSS 或 JavaScript 直接“读取”一个属性值，而是通过测量和计算来实现。

主要检测方法

1. 使用浏览器开发者工具（最常用、最直观）

现代浏览器（Chrome, Firefox, Edge 等）的 DevTools 提供了强大的性能分析功能。

步骤 (以 Chrome DevTools 为例)：
1. 打开 DevTools (F12 或 Ctrl+Shift+I)。
2. 切换到 Performance (性能) 或 Performance Monitor (性能监视器) 标签页。
3. 开始录制 (Record 按钮)。
4. 触发动画或让页面运行一段时间。
5. 停止录制。
6. 查看分析结果：
  - FPS 图表：在时间轴上方会有一个绿色的 FPS 图表。绿色表示良好（接近 60 FPS），黄色/红色表示掉帧（低于 60 FPS）。
  - Rendering 面板：可以查看 Frames，每个竖条代表一帧，高度代表该帧的耗时（理想是 ≤ 16.67ms）。可以点击具体帧查看详细信息。
  - Main 线程：检查是否有长时间的任务阻塞了主线程，导致无法按时绘制新帧。
优点：可视化强，能精确定位性能瓶颈（是 JS 执行慢？样式计算？重排重绘？还是合成层问题？）。

2. 使用 JavaScript 计算 FPS（编程方式）

可以通过 requestAnimationFrame API 来手动计算动画过程中的实时 FPS。

let frameCount = 0;
let lastTime = performance.now();
let currentFPS = 0;

function updateFPS() {
    const now = performance.now();
    frameCount++;

    // 每秒更新一次 FPS 显示
    if (now - lastTime >= 1000) { // 1000ms = 1s
        currentFPS = Math.round((frameCount * 1000) / (now - lastTime));
        console.log(`Current FPS: ${currentFPS}`);

        // 重置计数器
        frameCount = 0;
        lastTime = now;
    }

    // 继续请求下一帧
    requestAnimationFrame(updateFPS);
}

// 启动 FPS 监控
requestAnimationFrame(updateFPS);

// --- 应用你的 CSS 动画 ---
// 例如，给某个元素添加一个动画类
// document.getElementById('animated-element').classList.add('animate');

原理：requestAnimationFrame 在每次浏览器准备重绘时调用回调函数。我们统计在 1 秒内被调用了多少次，这个次数就是当前的 FPS。
优点：可以集成到应用中，实时显示 FPS 水平。
缺点：只能反映整体页面的渲染帧率，不一定精确对应单个 CSS 动画。如果页面有其他动画或滚动，也会被计入。

3. 使用专门的性能监控库

有一些轻量级库可以简化 FPS 的监控。

stats.js：Three.js 作者开发的简单性能监视器，可以在页面上显示一个实时的 FPS 面板。
优点：简单易用，适合在开发或演示环境中快速查看性能。

影响 CSS 动画 FPS 的关键因素

在检测 FPS 的同时，也应了解什么会导致掉帧：

重排 (Reflow) 和重绘 (Repaint)：
- 如果动画触发了布局变化（如改变 width, height, margin, top 等），会导致昂贵的重排。
- 优化：尽可能只动画 transform 和 opacity 属性，它们通常只触发 Composite（合成）阶段，不触发重排和重绘，性能最佳。
JavaScript 阻塞：
- 复杂的 JS 计算或长时间任务会阻塞主线程，导致无法及时处理渲染任务。
- 优化：将复杂计算放入 Web Workers 或使用 setTimeout/requestIdleCallback 分解任务。
过度绘制 (Overdraw)：
- 多个图层重叠，GPU 需要多次绘制同一像素。
- 优化：避免不必要的透明层，合理使用 will-change 或 transform: translateZ(0) 创建独立的合成层（但不要滥用）。
复杂的 CSS 选择器或样式：
- 过于复杂的选择器会增加样式计算时间。
- 优化：保持选择器简洁。

总结回答示例

检测 CSS 动画的 FPS 主要有两种方式：

一是使用浏览器开发者工具（如 Chrome 的 Performance 面板），它能提供最直观、最详细的 FPS 图表和性能瓶颈分析；

二是通过 JavaScript 的 requestAnimationFrame 手动计算每秒渲染的帧数，并实时输出。

此外，也可以使用像 stats.js 这样的库在页面上嵌入 FPS 监控面板。

需要注意的是，FPS 受多种因素影响，为了保持 60 FPS 的流畅体验，应尽量只对 transform 和 opacity 进行动画，并避免触发重排和重绘。

THE END

前端 CSS 面试题