Long Tasks API - 使我们能够了解需要 50 毫秒或更长时间的任务

动机

Long Tasks API 是实验性的接口，使我们能够了解需要 50 毫秒或更长时间的任务。50 毫秒阈值来自 RAIL 模型，特别是 “Response: process events in under 50 ms（响应：在 50 毫秒内处理事件）” 部分。

阻塞主线程 50 毫秒或更长时间的任务会导致以下问题：

• 延迟 "交互时间".
• 高 / 可变输入延迟。
• 高 / 可变事件处理延迟。
• 不协调的动画和滚动。

概念

Long Tasks API 使用的一些关键术语或想法。

Long task

主 UI 线程忙碌 50 毫秒或更长时间的任何不间断时间段。常见的例子包括：

• 长时间运行的事件处理程序。
• 耗时的重绘和其他重新渲染。
• 浏览器在超过 50 毫秒的事件循环的不同轮次之间执行的工作。

罪魁祸首浏览上下文容器

“罪魁祸首浏览上下文容器”，或简称 “容器”，是任务发生在其中的顶级页面、iframe、嵌入或对象。

归因

任务发生在其中的容器列表。对于不在顶层页面中出现的任务，containerId 、containerName 和 containerSrc 字段可以提供有关任务来源的信息。

用法

var observer = new PerformanceObserver(function(list) {
    var perfEntries = list.getEntries();
    for (var i = 0; i < perfEntries.length; i++) {
        // 处理长任务通知：报告分析和监控
        // ...
    }
});

// 为长任务通知注册观察者
register observer for long task notifications
observer.observe({entryTypes: ["longtask"]});
// 在这之后长时间的脚本执行会使观察者中出现排队和接收 "长任务 "的条目。

接口

PerformanceLongTaskTiming

报告长任务的实例。

TaskAttributionTiming

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

规范

规范	状态	备注
Long Tasks API 1	工作草案	初始定义。

浏览器兼容性

PerformanceLongTaskTiming

桌面浏览器兼容性

移动浏览器兼容性

1. 参阅 bug 1348405。

TaskAttributionTiming

桌面浏览器兼容性

移动浏览器兼容性

1. 参阅 bug 1348405。

相关链接

• GitHub 仓库包含文档和一些代码实例。
• PerfPlanet 2017 年 12 月 20 日关于 Long Tasks API 的文章。