Element Timing API All In One
Element Timing API All In One
The Element Timing API provides features for monitoring the loading performance of large image elements and text nodes as they appear on screen.
Element Timing API 提供了监控大图像元素和文本节点在屏幕上出现时的加载性能的功能。
PerformanceObserver
<img src="image.jpg" elementtiming="big-image">
<p elementtiming="text" id="text-id">text here</p>
const observer = new PerformanceObserver((list) => {
let entries = list.getEntries().forEach(function (entry) {
console.log(entry);
});
});
observer.observe({ entryTypes: ["element"] });
https://developer.mozilla.org/en-US/docs/Web/API/Element_timing_API
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceObserver
function observer_callback(list, observer) {
// Process the "measure" event
}
let observer = new PerformanceObserver(observer_callback);
observer.observe({entryTypes: ["measure"]});
demo
element
<img elementtiming="hero-image" />
<p elementtiming="important-paragraph">This is text I care about.</p>
// Catch errors since some browsers throw when using the new `type` option.
// https://bugs.webkit.org/show_bug.cgi?id=209216
try {
// Create the performance observer.
const po = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
// Log the entry and all associated details.
console.log(entry.toJSON());
}
});
// Start listening for `element` entries to be dispatched. ✅ element
po.observe({type: 'element', buffered: true});
} catch (e) {
// Do nothing if the browser doesn't support this API.
}
https://cdn.xgqfrms.xyz/Web-API/Element-Timing-API/index.html
LCP
Largest Contentful Paint (LCP) 指标用于了解最大的图像或文本块
何时绘制到屏幕上;
但在某些情况下,您希望测量不同元素的渲染时间, 对于这些情况,您可以使用 Element Timing API
。
实际上,Largest Contentful Paint API
建立在 Element Timing API
之上,并添加了对最大内容元素的自动报告
;
但是您可以通过显式添加 elementtiming
属性来报告其他元素,并注册一个 PerformanceObserver 来观察元素条目类型。
const op = new PerformanceObserver((entryList) => {
for (const entry of entryList.getEntries()) {
console.log('LCP candidate:', entry.startTime, entry);
}
});
// largest-contentful-paint ✅
op.observe({type: 'largest-contentful-paint', buffered: true});
FCP
First Contentful Paint
(FCP) 首次内容绘制, 这类以用户为中心的较新性能指标只会捕获加载体验最开始的部分。
FMP
First Meaningful Paint
(FMP) 首次有效绘制
https://web.dev/first-meaningful-paint/
refs
https://web.dev/custom-metrics/#element-timing-api
©xgqfrms 2012-2020
www.cnblogs.com/xgqfrms 发布文章使用:只允许注册用户才可以访问!
原创文章,版权所有©️xgqfrms, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16207116.html
未经授权禁止转载,违者必究!