Web Vitals 库中 FCP 和 TTFB 指标重复触发问题解析

问题现象

在使用 Web Vitals 库（特别是 3.5.2 版本）时，开发者可能会遇到首次内容绘制（FCP）和首字节时间（TTFB）这两个指标被多次触发的问题。这些指标本应是单次事件，但在某些情况下却会被重复记录，且每次记录的持续时间相同，但 metric.id 值不同。

问题根源

经过深入分析，发现这个问题主要出现在以下场景中：

1. 库被多次加载：当 Web Vitals 库在单页面应用中被多次初始化时，会导致多个 PerformanceObserver 实例被创建，从而造成指标重复记录。

2. Next.js 应用的特殊情况：在 Next.js 框架中，如果将 Web Vitals 的 on* 函数直接导入到 _app.tsx 文件中，会导致这些函数在服务器端和客户端都被执行，相当于加载了两次。

技术原理

Web Vitals 库的核心工作原理是创建 PerformanceObserver 实例来监听性能指标。对于 FCP 和 TTFB 这类一次性指标：

• TTFB 指标在获取到后立即触发一次
• FCP 指标在 PerformanceObserver 捕获到对应条目后立即断开连接

当库被多次加载时，每个实例都会独立地监听和报告这些指标，导致重复记录。

解决方案

1. 确保单次加载：Web Vitals 库应该在整个应用生命周期中只加载一次。可以通过以下方式实现：

if (typeof window !== 'undefined') {
  import('web-vitals').then(({ onCLS, onFID, onLCP }) => {
    // 初始化指标监听
  });
}

2. Next.js 最佳实践：在 Next.js 应用中，应该将 Web Vitals 的初始化代码放在客户端执行的上下文中，避免服务器端执行。

3. 遵循官方建议：正如 Web Vitals 文档中明确指出的，每个指标函数（如 onCLS、onFID、onLCP 等）在每次页面加载时应该只调用一次。重复调用可能会导致内存泄漏。

注意事项

• 这个问题与 reportAllChanges 参数无关，因为 FCP 和 TTFB 指标本身就不使用这个参数
• 浏览器前进/后退缓存（bfcache）恢复和软导航（soft navigation）也可能导致类似现象，但属于预期行为
• 在排查问题时，应该首先检查是否有多处代码初始化了 Web Vitals 监听

总结

Web Vitals 库的性能指标监听机制设计为单例模式，重复初始化会导致指标重复记录。在单页面应用特别是 Next.js 框架中，需要特别注意加载时机和位置，确保库只被初始化一次。通过合理的代码组织和加载控制，可以避免这类问题的发生，确保性能监控数据的准确性。