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});

https://web.dev/lcp/