告别手动测量：使用 PerformanceObserver 轻松获取首屏时间

引言

对于网站开发人员来说，优化网站性能至关重要，而首屏时间是衡量网站响应能力的关键指标。然而，传统的手动计算首屏时间既费时又容易出错。为了解决这一难题，PerformanceObserver 应运而生，它是一种强大的 API，可帮助我们轻松准确地获取首屏时间。

PerformanceObserver 的原理

PerformanceObserver 是一种浏览器 API，允许我们观察和测量页面性能指标。它通过创建 Observer 实例并指定要观察的性能事件来工作。当这些事件发生时，PerformanceObserver 会触发一个回调函数，该函数将提供事件的详细数据。

获取首屏时间

要使用 PerformanceObserver 获取首屏时间，我们可以创建以下 Observer 实例：

const observer = new PerformanceObserver((list) => {
  // 处理 performance entries
});

observer.observe({ type: 'paint', buffered: true });

buffered: true 选项确保在页面加载完成后收集所有 paint 条目，使我们能够准确获取首屏时间。

确定首屏时间

PerformanceObserver 记录的 paint 条目包含有关页面渲染阶段的信息。要确定首屏时间，我们需要找到 first-contentful-paint（FCP）条目的开始时间。FCP 表示页面中第一个有意义的内容被渲染的时间。

const fcpEntry = list.getEntriesByName('first-contentful-paint')[0];
const fcpTime = fcpEntry.startTime;

获取白屏时间

PerformanceObserver 还可以帮助我们获取白屏时间，即用户看到浏览器窗口变白的瞬间。要获取白屏时间，我们可以查找 paint 条目中的 navigationStart 条目，它表示页面加载的开始时间。

const navigationStart = list.getEntriesByName('navigationStart')[0];
const whiteScreenTime = navigationStart.startTime;

结论

通过利用 PerformanceObserver，我们告别了手动计算首屏时间，拥抱了一种更简单、更准确的方法。这使我们能够专注于优化网站性能，提高用户体验。PerformanceObserver 不仅如此，它还为我们提供了深入了解页面加载过程的工具，为进一步优化提供了有价值的见解。拥抱 PerformanceObserver，踏上卓越 Web 性能之旅。