这篇翻译不完整。请帮忙从英语翻译这篇文章

目的

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 ? IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
attribution
Experimental
Chrome Full support 58Edge ? Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

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 ? IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
containerId
Experimental
Chrome Full support 58Edge ? Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
containerName
Experimental
Chrome Full support 58Edge ? Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
containerSrc
Experimental
Chrome Full support 58Edge ? Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes
containerType
Experimental
Chrome Full support 58Edge ? Firefox ? IE ? Opera Full support YesSafari ? WebView Android Full support 58Chrome Android Full support 58Firefox Android ? Opera Android Full support YesSafari iOS ? Samsung Internet Android Full support Yes

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

相关推荐

文档标签和贡献者

此页面的贡献者: koolc
最后编辑者: koolc,