长任务 API

动机

实验性长任务 API 使我们可以看到耗时 50 毫秒或更长时间的任务。50 毫秒阈值来自 RAIL Model ,特别是 "Response: process events in under 50 ms" 章节。

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

  • 延迟 " 时间以交互 ".
  • 高/可变输入延迟。
  • 高/可变事件处理延迟。
  • Janky 动画和卷动。

概念

Some key terms or ideas that are utilized by the Long Tasks API.

长任务

Any uninterrupted period where the main UI thread is busy for 50 ms or longer. Common examples include:

  • Long running event handlers.
  • Expensive reflows and other re-renders.
  • Work the browser does between different turns of the event loop that exceeds 50 ms.

罪魁祸首浏览上下文容器

The "culprit browsing context container", or "the container" for short, is the top level page, iframe, embed or object that the task occurred within.

归属

A list of containers that the task occurred within. For tasks that don't occur within the top level page, the containerId , containerName and containerSrc fields may provide information as to the source of the task.

用法

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
Returns information about the work involved in a long task and its associate frame context.

规范

规范 状态 Comment
长任务 API 1 工作草案 初始定义。

浏览器兼容性

PerformanceLongTaskTiming

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
PerformanceLongTaskTiming
Chrome 58 Edge ≤79 Firefox 不支持 No
注意事项
No
注意事项
bug 1348405 .
IE ? Opera Yes Safari ? WebView Android 58 Chrome Android 58 Firefox Android 不支持 No
注意事项
No
注意事项
bug 1348405 .
Opera Android Yes Safari iOS ? Samsung Internet Android 7.0
attribution
Chrome 58 Edge ≤79 Firefox 不支持 No IE ? Opera Yes Safari ? WebView Android 58 Chrome Android 58 Firefox Android 不支持 No Opera Android Yes Safari iOS ? Samsung Internet Android 7.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。

TaskAttributionTiming

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
TaskAttributionTiming
Chrome 58 Edge ≤79 Firefox 不支持 No
注意事项
No
注意事项
bug 1348405 .
IE ? Opera Yes Safari ? WebView Android 58 Chrome Android 58 Firefox Android 不支持 No
注意事项
No
注意事项
bug 1348405 .
Opera Android Yes Safari iOS ? Samsung Internet Android 7.0
containerId
Chrome 58 Edge ≤79 Firefox 不支持 No IE ? Opera Yes Safari ? WebView Android 58 Chrome Android 58 Firefox Android 不支持 No Opera Android Yes Safari iOS ? Samsung Internet Android 7.0
containerName
Chrome 58 Edge ≤79 Firefox 不支持 No IE ? Opera Yes Safari ? WebView Android 58 Chrome Android 58 Firefox Android 不支持 No Opera Android Yes Safari iOS ? Samsung Internet Android 7.0
containerSrc
Chrome 58 Edge ≤79 Firefox 不支持 No IE ? Opera Yes Safari ? WebView Android 58 Chrome Android 58 Firefox Android 不支持 No Opera Android Yes Safari iOS ? Samsung Internet Android 7.0
containerType
Chrome 58 Edge ≤79 Firefox 不支持 No IE ? Opera Yes Safari ? WebView Android 58 Chrome Android 58 Firefox Android 不支持 No Opera Android Yes Safari iOS ? Samsung Internet Android 7.0

图例

完整支持
完整支持
不支持
不支持
兼容性未知
兼容性未知
实验。期望将来行为有所改变。
实验。期望将来行为有所改变。
见实现注意事项。

另请参阅