Long Tasks API All In One

Long Tasks API All In One

The experimental Long Tasks API gives us visibility into tasks that take 50 milliseconds or more. The 50 ms threshold comes from the RAIL Model, in particular the "Response: process events in under 50 ms" section.

实验性的 Long Tasks API 让我们可以看到需要 50 毫秒或更长时间的任务。
50 毫秒阈值来自 RAIL 模型，特别是“响应：在 50 毫秒以下处理事件”部分。

PerformanceObserver

const observer = new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
    for (var i = 0; i < perfEntries.length; i++) {
        // Process long task notifications:
        // report back for analytics and monitoring
        // ...
    }
});

// register observer for long task notifications
observer.observe({entryTypes: ["longtask"]});
// Long script execution after this will result in queueing and receiving "longtask" entries in the observer.

https://developer.mozilla.org/en-US/docs/Web/API/Long_Tasks_API

https://w3c.github.io/longtasks/

https://github.com/w3c/longtasks

许多较高级别的指标都是建立在 Long Tasks API 上的（例如 Time to Interactive (TTI) 和 Total Blocking Time (TBT)）。

demo

longtask

// 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((list) => {
    for (const entry of list.getEntries()) {
      // Log the entry and all associated details.
      console.log(entry.toJSON());
    }
  });
  // Start listening for `longtask` entries to be dispatched. ✅
  po.observe({type: 'longtask', buffered: true});
} catch (e) {
  // Do nothing if the browser doesn't support this API.
}

https://cdn.xgqfrms.xyz/Web-API/Long-Tasks-API/index.html

refs

https://web.dev/custom-metrics/#long-tasks-api

---

---

©xgqfrms 2012-2025

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

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---