--- title: Long Tasks API slug: Web/API/Long_Tasks_API translation_of: Web/API/Long_Tasks_API ---

目的

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

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

{{domxref("可交互时间")}} 延迟
严重不稳定的交互行为(轻击、单击、滚动、滚轮等)延迟（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.

接口

{{domxref('PerformanceLongTaskTiming')}}: 返回长任务实例。
{{domxref("TaskAttributionTiming")}}: 返回长任务中涉及的工作及其关联的框架上下文信息。

规范协议

规范协议	状态	备注
{{SpecName('Long Tasks')}}	{{Spec2('Long Tasks')}}	初始定义

目的

概念

长任务（Long task）

浏览上下文的罪魁容器

清单（Attributions）

用法

接口

规范协议

浏览器兼容性

`PerformanceLongTaskTiming`

`TaskAttributionTiming`

相关推荐