Long Tasks API

This translation is incomplete. Please help translate this article from English

目的

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
PerformanceLongTaskTiming
Experimental
Chrome Full support 58Edge ? Firefox No support No
Notes
No support No
Notes
Notes See bug 1348405.
IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1348405.
Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support 7.0
attribution
Experimental
Chrome Full support 58Edge ? Firefox No support NoIE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android No support NoOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

TaskAttributionTiming

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
TaskAttributionTiming
Experimental
Chrome Full support 58Edge ? Firefox No support No
Notes
No support No
Notes
Notes See bug 1348405.
IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android No support No
Notes
No support No
Notes
Notes See bug 1348405.
Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support 7.0
containerId
Experimental
Chrome Full support 58Edge ? Firefox No support NoIE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android No support NoOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support 7.0
containerName
Experimental
Chrome Full support 58Edge ? Firefox No support NoIE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android No support NoOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support 7.0
containerSrc
Experimental
Chrome Full support 58Edge ? Firefox No support NoIE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android No support NoOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support 7.0
containerType
Experimental
Chrome Full support 58Edge ? Firefox No support NoIE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android No support NoOpera Android Full support YesSafari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.

相关推荐