PerformanceObserver在Firefox中报错，Chrome中正常运行的问题求助

我之前也碰到过类似的情况，Firefox对PerformanceObserver的实现和Chrome确实有一些细节差异，结合你的代码，下面是几个可能的问题点和对应的修复方案：

1. 未正确调用observe方法或缺少buffered选项 #

Chrome会自动缓冲页面加载早期的性能条目，即使你在页面加载完成后创建Observer，也能通过getEntries()拿到数据；但Firefox默认不会缓冲这些条目，如果你在DOMContentLoaded或load事件之后才初始化Observer，就会拿不到数据，甚至可能触发错误。另外，必须明确指定要监听的entryTypes为['paint']。

修复方式：初始化Observer后，调用observe时加上buffered: true，确保能捕获已经触发的paint事件：

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (typeof(Storage) !== 'undefined') {
      if (entry.name === 'first-paint') {
        localStorage.setItem(rumMetrics.RUM_METRICS_FIRST_PAINT, entry.startTime);
      } else if (entry.name === 'first-contentful-paint') {
        localStorage.setItem(rumMetrics.RUM_METRICS_FIRST_CONTENTFUL_PAINT, entry.startTime);
      }
    } else {
      console.log("LocalStorage is not available"); // 替换你原来的占位符内容
    }
  }
});
// 关键：添加buffered选项并指定entryTypes
observer.observe({ entryTypes: ['paint'], buffered: true });

2. rumMetrics变量未正确定义或Firefox的变量提升差异 #

如果rumMetrics是在Observer之后定义的，Firefox可能会因为变量提升的细节问题，导致访问rumMetrics.RUM_METRICS_FIRST_PAINT时出现Cannot read properties of undefined错误，而Chrome的容错或变量处理逻辑可能让它暂时不报错。

修复方式：确保rumMetrics在Observer初始化之前就已经定义并赋值：

// 先定义rumMetrics常量
const rumMetrics = {
  RUM_METRICS_FIRST_PAINT: 'first_paint',
  RUM_METRICS_FIRST_CONTENTFUL_PAINT: 'first_contentful_paint'
};

// 再初始化PerformanceObserver
const observer = new PerformanceObserver((list) => {
  // ... 你的原有代码
});
observer.observe({ entryTypes: ['paint'], buffered: true });

3. 语法错误：console.log(...)的占位符问题 #

你的代码里else分支的console.log(...);是语法错误，三个点在这里没有合法的上下文，Firefox的JavaScript引擎对语法错误的检测可能更严格，会直接抛出错误，而Chrome可能在某些情况下忽略这个问题（不过其实Chrome也会报错）。

修复方式：把占位符替换成具体的内容，比如：

else {
  console.log("LocalStorage is not supported in this environment");
}

额外的兼容性提示 #

• 确保你的Firefox版本在60以上，因为Firefox从60版本开始支持paint类型的PerformanceEntry。
• 如果需要更全面的兼容性，可以先检查PerformanceObserver.supportedEntryTypes是否包含'paint'，避免在不支持的浏览器中执行代码：

if ('PerformanceObserver' in window && PerformanceObserver.supportedEntryTypes.includes('paint')) {
  // 初始化Observer的代码
} else {
  console.log("PerformanceObserver for paint metrics is not supported");
}

内容的提问来源于stack exchange，提问作者Abhinav