Long Tasks API

目的

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

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

规范

浏览器兼容性

相关推荐

• GitHub repository 包含文档和代码范例。
• PerfPlanet article on Long Tasks API from 20th December 2017.