Long Tasks API

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Invalid slug for templ/sidebar: Long Tasks

目的

Long Tasks，这是一个实验性 API，它可以直观地告诉我们哪些任务执行耗费了 50 毫秒或更多时间。

阻塞主线程达 50 毫秒或以上的任务会导致以下问题：

可交互时间 延迟
严重不稳定的交互行为 (轻击、单击、滚动、滚轮等) 延迟（High/variable input latency）
严重不稳定的事件回调延迟（High/variable event handling latency）
紊乱的动画和滚动（Janky animations and scrolling）

概念

长任务（Long task）API 使用的一些关键术语或思想。

长任务（Long task）

任何连续不间断的且主 UI 线程繁忙 50 毫秒及以上的时间区间。比如以下常规场景：

长耗时的事件回调（long running event handlers）
代价高昂的回流和其他重绘（expensive reflows and other re-renders）
浏览器在超过 50 毫秒的事件循环的相邻循环之间所做的工作（work the browser does between different turns of the event loop that exceeds 50 ms）

浏览上下文的罪魁容器

浏览上下文的罪魁容器，简称“容器”，指任务发生在其中的顶层页面（the top level page）、iframe、嵌入插槽（embed）或对象（object）。

清单（Attributions）

即执行任务的容器清单。针对没有在顶层页面容器内执行的任务，containerId、containerName和containerSrc字段可以用来提供任务源信息。

示例

var 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.

接口

PerformanceLongTaskTiming: 返回长任务实例。
TaskAttributionTiming: 返回长任务中涉及的工作及其关联的框架上下文信息。

规范

Specification
Long Tasks API # sec-PerformanceLongTaskTiming

浏览器兼容性

BCD tables only load in the browser