PerformanceObserver/白屏时间(FCP)/首屏时间(LCP)

白屏时间和首屏时间的区别?

FCP

全称First Content Paint,指浏览器白屏开始加载到渲染了第一个内容出来的事件，用户只能看到一点点的内容

LCP

全称Large Content Paint,指最大内容的渲染，通常这时候用户应该能看到大部分完整的页面内容了

2023-12-25T06:32:59.png

PerformanceObserver

使用方法和之前Interserction类似，都是异步API，可以用于观察页面具体的性能数据

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});

observer.observe({
  entryTypes: ["navigation", "measure"],
  buffered: true, // 是否包含观察前发生的变化
  transferMode: "report",  //默认值，或者accumulate 以累计形式返回
});


//手动创建一个标记
performance.mark('test-harexs')

// 自定义触发一个性能测量
function measureClick() {
  performance.measure("button clicked");
}

observe参数

entryTypes用于指定要观测的类型，包含:

navigation 页面以及导航
resource资源相关
mark 标记点用户可以手动创建标记用于触发
measure 测量多个标记点之间的差异
paint 观测绘制数据

回调的详细参数

measure

"entryType": "measure"：这表示这个性能条目的类型是 "measure"。
"startTime": 0：这是测量的开始时间，
"duration": 4088.7999999523163：这是性能测量的持续时间，表示从测量开始到测量结束的时间差，同样以毫秒（ms）为单位。在这里，测量的持续时间为 4088.8 毫秒，表示按钮点击事件的执行时间```

mark

entryType（条目类型）：指示性能条目的类型，对于 PerformanceMark 来说，它是 "mark"，表明这是一个性能标记的条目。
startTime（开始时间）：性能标记的时间戳，以浏览器的导航开始时间为基准，通常以毫秒（ms）为单位。在这个例子中，标记的时间是从导航开始时开始计算的，为 342.6 毫秒。
duration（持续时间）：对于 PerformanceMark 来说，它始终是 0，因为标记只表示一个瞬时的时间点，没有持续时间。```

resource

entryType（条目类型）：指示性能条目的类型，对于 PerformanceResourceTiming 来说，它是 "resource"，表明这是一个与资源加载性能相关的条目。
startTime（开始时间）：资源加载开始的时间，以浏览器的导航开始时间为基准，通常以毫秒（ms）为单位。在我们这个例子中，资源加载开始于 301.4 毫秒。
duration（持续时间）：资源加载的持续时间，以毫秒（ms）为单位。这个资源加载持续时间为 0，表示加载是瞬时完成的。
initiatorType（发起者类型）：指示加载资源的方式或来源类型。这里是 "img"，表示该资源是通过 img 元素加载的。
nextHopProtocol（下一跳协议）：资源加载时使用的网络协议，这里为空白，表示未指定。
renderBlockingStatus（阻塞状态）：指示资源加载是否会阻塞渲染。这里是 "non-blocking"，表示该资源加载不会阻塞页面的渲染。
workerStart：相关于资源加载的事件，这里是 0，表示资源加载事件尚未开始。
redirectStart 和 redirectEnd：相关于重定向的事件，这里都是 0，表示没有发生重定向。
fetchStart：资源请求开始的时间，与导航开始时间的时间差，这里是 301.4 毫秒。
domainLookupStart 和 domainLookupEnd：与域名解析（DNS 查询）相关的事件，这里都是 0，表示域名解析尚未发生。
connectStart 和 connectEnd：与建立连接相关的事件，这里都是 0，表示尚未建立连接。
其他属性，如 secureConnectionStart、requestStart、responseStart 等，用于记录资源加载过程中的不同事件时间。
transferSize、encodedBodySize、decodedBodySize：与资源大小和传输相关的属性。在这个例子中，它们都为 0，表示资源大小很小，没有传输。
responseStatus：资源加载的响应状态码，这里是 0，表示没有响应状态码。
serverTiming：服务器定时信息，通常用于记录服务器端性能信息。```