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 毫秒或以上的任务会导致以下问题:

概念

长任务(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)

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

示例

js
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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PerformanceLongTaskTiming
Experimental
attribution
Experimental
toJSON
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

相关推荐