如何最快捷计算【白屏时间 FCP】和【首屏时间 LCP】
当我们被问到网页的性能问题时，我们往往会想到 首屏时间、白屏时间，但是其实很多人根本分不清这两个到底有啥区别，一问也是三不知，问你怎么计算的你也不知道，所以本文章教你怎么去计算这两个时间吧~
白屏时间 & 首屏时间
白屏时间
白屏时间指的是，从网页开始加载，到你网页第一个字节出现，这段时间称为 白屏时间，也叫First Content Paint，也就是第一次内容渲染出来的时候，简称 FCP
首屏时间
首屏时间指的是，从网页加载，到你网页第一屏渲染完成，这段时间称为 首屏时间，很多项目都是用Larget Content Paint来衡量，也就是最大内容渲染出来的时候，简称LCP
区别
其实也就是FCP、LCP的区别
- FCP： 第一个字节渲染出来的时间，这时候用户看不到主体网页结构
- LCP： 最大内容渲染出来的事件，这时候用户已经能看到主体网页的结构了
如何计算
我们刚刚说了，这两个时间的计算，都是 从网页加载，到XXX渲染完成，这段时间是我们需要计算的时间，也就是我们需要算出这两个时间点：
- 网页开始加载
- XXX渲染完成
网页开始加载
如何计算网页开始加载的时间呢？我们可以通过 performance.getEntriesByType('navigation')[0]去获取到一个属性 activationStart，他就是网页开始加载的时间
const startTime =
performance.
getEntriesByType('navigation')[0].
activationStart ?? 0
计算 FCP
我们已经拥有网页开始加载的时间点startTime了，我们想要计算FCP，那么只需要获取到第一个字节渲染完时的时间点，减去startTime，就可以得到FCP了
FCP = 第一字节渲染时间点 - startTime我们要怎么获得 第一字节渲染时间点 呢？我们可以使用 PerformanceObserver，他是一个浏览器提供给我们用来监测网页性能的观察器
使用方法如下，传入不同的 type，他可以监听并返回不同的加载列表，比如你想监听 FCP，那么你就得传入 paint
至于这个buffered，你可以理解为，你设为true之后，你就不用把这个监听放在文档前了，而是可以放在任意位置去监听
const observer = new PerformanceObserver(function (list, obj) {
const entries = list.getEntries();
console.log(entries)
});
observer.observe({
type: 'paint',
buffered: true,
});
传入type = paint，我们会得到两种加载事件项，一种是 first-paint，一种是first-content-paint，但是我们只想要后者，前者其实就是FP，现在这个指标的意义已经不大了，所以我们需要过滤，去计算FCP
而渲染事件对象里的startTime就是第一字节渲染完成的时间点
let FCP = 0;
let po = null;
const startTime =
performance.
getEntriesByType('navigation')[0].
activationStart ?? 0
const observer = new PerformanceObserver(function (list, obj) {
const entries = list.getEntries();
entries.forEach(entry => {
if (entry.name === 'first-contentful-paint') {
// 计算 FCP
FCP = Math.max(entry.startTime - startTime, 0);
// 计算完立即取消监听
po!.disconnect();
}
});
});
po = observer.observe({
type: 'paint',
buffered: true,
});计算 LCP
当你的传入的type = largest-contentful-paint时，能监听最大内容渲染的渲染事件
const observer = new PerformanceObserver(function (list, obj) {
const entries = list.getEntries();
console.log(entries)
});
observer.observe({
type: 'largest-contentful-paint',
buffered: true,
});
计算方式还是按照刚刚FCP的计算方式去计算即可
let LCP = 0;
let po = null;
const startTime =
performance.
getEntriesByType('navigation')[0].
activationStart ?? 0
const observer = new PerformanceObserver(function (list, obj) {
const entries = list.getEntries();
entries.forEach(entry => {
// 计算 FCP
FCP = Math.max(entry.startTime - startTime, 0);
// 计算完立即取消监听
po!.disconnect();
});
});
po = observer.observe({
type: 'largest-contentful-paint',
buffered: true,
});