Skip to main content

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 1Working Draft初始定义。

浏览器兼容性​

PerformanceLongTaskTiming​

桌面浏览器兼容性​

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持5879不支持1不支持45不支持
attribution5879不支持不支持45不支持
toJSON5879不支持不支持45不支持

移动浏览器兼容性​

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持5858未知不支持1未知43不支持
attribution5858未知不支持未知43不支持
toJSON5858未知不支持未知43不支持

1. 参阅 bug 1348405。

TaskAttributionTiming​

桌面浏览器兼容性​

特性ChromeEdgeFirefoxInternet ExplorerOperaSafari
基础支持5879不支持1不支持45不支持
containerId5879不支持不支持45不支持
containerName5879不支持不支持45不支持
containerSrc5879不支持不支持45不支持
containerType5879不支持不支持45不支持
toJSON5879不支持不支持45不支持

移动浏览器兼容性​

特性AndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
基础支持5858未知不支持1未知43不支持
containerId5858未知不支持未知43不支持
containerName5858未知不支持未知43不支持
containerSrc5858未知不支持未知43不支持
containerType5858未知不支持未知43不支持
toJSON5858未知不支持未知43不支持

1. 参阅 bug 1348405。

相关链接​

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