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

text here

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

This is text I care about.

// 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.  ?
  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

refs

https://web.dev/custom-metrics/#element-timing-api

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！