window.performance与PerformanceObserver的定位及功能差异咨询

定位差异 #

• window.performance：静态快照式API，主打主动查询已生成的性能数据。它相当于一个存储页面加载、资源请求等性能日志的本地数据库，需要你主动调取才能拿到数据。
• PerformanceObserver：异步监听式API，专注被动捕获性能事件的发生。它会在特定性能指标产生的第一时间触发回调，无需主动轮询或查询。

功能与使用场景差异 #

1. 数据获取时机 #

• 用performance.getEntriesByType('paint')获取FCP时，必须等FCP事件已经发生后才能拿到有效数据。如果代码执行过早（比如页面刚启动就调用），大概率会返回空结果，需要自己处理时机问题——比如放在load事件回调里，或者做轮询检查。
• PerformanceObserver可以在页面初始化阶段就注册监听，一旦FCP事件产生，立刻就能在回调中拿到数据，完全不会错过早期的性能事件，特别适合捕获那些发生在脚本执行之前的指标。

2. 动态数据覆盖能力 #

• window.performance存储的条目有数量限制，旧的性能数据可能被浏览器自动丢弃；而且它只能获取调用时已存在的条目，对于后续动态加载的资源（比如懒加载图片、异步脚本），你需要重复调用getEntries()去检查新数据。
• PerformanceObserver可以持续监听所有符合类型的性能事件，包括后续动态产生的。比如监听resource类型时，每加载一个新资源都会触发回调，无需手动重复查询。

3. 性能开销与效率 #

• 如果需要持续监控性能数据，用window.performance就得定时轮询getEntries()，这会带来额外的性能开销，还容易漏过事件。
• PerformanceObserver是浏览器主动推送数据，只有当事件发生时才会执行回调，开销更低、效率更高，尤其适合长期监控的场景。

4. 细粒度指标支持 #

• window.performance能获取paint、resource、navigation等基础类型的条目，但对于largest-contentful-paint、layout-shift这类Core Web Vitals指标，PerformanceObserver是更可靠的选择——这些指标可能会在页面生命周期中动态更新，Observer能实时捕获最新状态。
• 比如LCP会随着页面滚动加载新内容而更新，PerformanceObserver可以全程捕获这个变化过程，而window.performance只能拿到最后一次记录的LCP条目。

实际代码示例 #

用window.performance获取FCP #

// 需确保FCP已发生，否则返回空数组
window.addEventListener('load', () => {
  const paintEntries = performance.getEntriesByType('paint');
  const fcpEntry = paintEntries.find(entry => entry.name === 'first-contentful-paint');
  if (fcpEntry) {
    console.log('FCP时间:', fcpEntry.startTime);
  }
});

用PerformanceObserver监听FCP #

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.name === 'first-contentful-paint') {
      console.log('FCP时间:', entry.startTime);
      observer.disconnect(); // 拿到数据后可停止监听
    }
  }
});
observer.observe({ entryTypes: ['paint'] });
// 页面初始化时注册，不会错过FCP事件

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