Long Tasks API

目的

Long Tasks,这是一个实验性API,它可以直观地告诉我们哪些任务执行耗费了50毫秒或更多时间。50毫秒这个阈值标准来源于《RAIL Model》中 "Response: process events in under 50ms" 章节。

阻塞主线程达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字段可以用来提供任务源信息。

用法

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
返回长任务中涉及的工作及其关联的框架上下文信息。

规范协议

规范协议 状态 备注
Long Tasks API 1 Working Draft 初始定义

浏览器兼容性

PerformanceLongTaskTiming

BCD tables only load in the browser

TaskAttributionTiming

BCD tables only load in the browser

相关推荐