LargestContentfulPaint - 提供了加载页面时最大图像或文字绘画的详细信息
LargestContentfulPaint
是 Largest Contentful Paint API 的接口,提供了加载页面时最大图像或文字绘画的详细信息。在页面加载过程中,该绘画的时间是一个很重要的指标。
属性
LargestContentfulPaint.element
当前最大内容绘制的元素。
LargestContentfulPaint.renderTime
元素渲染到屏幕上的时间。如果元素是没有 Timing-Allow-Origin
标头加载的跨域图像,则可能不可用。
LargestContentfulPaint.loadTime
元素的加载时间。
LargestContentfulPaint.size
返回元素的固有大小(宽度 * 高度)。
LargestContentfulPaint.id
元素的 ID。没有 ID 时,此属性返回一个空字符串。
LargestContentfulPaint.url
如果元素是图像,则为图像的请求 URL。
方法
LargestContentfulPaint.toJSON()
将上述属性作为 JSON 返回。
实例
以下实例说明如何创建一个 PerformanceObserver
,以侦听 largest-contentful-paint
条目并将 LCP 值记录到控制台。
这个实例还演示了如何包括缓冲条目(那些在调用 observer()
之前发生的条目),它通过将 buffered
选项设置为 true
来完成的。
请注意,在此实例中,仅当用户离开选项卡时才将数据发送到服务器。
// 捕获错误,因为某些浏览器在使用新的 `type` 选项时会抛出该错误。
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
let lcp;
const po = new PerformanceObserver((entryList) => {
const entries = entryList.getEntries();
const lastEntry = entries[entries.length - 1];
// 使用 `renderTime` 或 `loadTime` 将 lcp 更新为最新值。
//(注意:如果没有 `Timing-Allow-Origin` 标头,
// 则 `renderTime` 在跨域加载的图像元素上可能不可用。)
lcp = lastEntry.renderTime || lastEntry.loadTime;
});
po.observe({type: 'largest-contentful-paint', buffered: true});
// 将数据发送到服务器。
addEventListener('visibilitychange', function fn() {
if (lcp && document.visibilityState === 'hidden') {
console.log('LCP:', lcp);
removeEventListener('visibilitychange', fn, true);
}
}, true);
} catch (e) {
// 如果浏览器不支持此 API,则什么也不做。
}
规范
规范 | 状态 | 备注 |
---|---|---|
Largest Contentful Paint LargestContentfulPaint 的定义 |
编者的草案 | 初始定义。 |
桌面浏览器兼容性
暂无兼容数据