Long Tasks API
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
目的
*Long Tasks,*这是一个实验性 API,它可以直观地告诉我们哪些任务执行耗费了 50 毫秒或更多时间。50 毫秒这个阈值标准来源于《RAIL Model》中 "Response: process events in under 50ms" 章节。
阻塞主线程达 50 毫秒或以上的任务会导致以下问题:
可交互时间
延迟- 严重不稳定的交互行为 (轻击、单击、滚动、滚轮等) 延迟(High/variable input latency)
- 严重不稳定的事件回调延迟(High/variable event handling latency)
- 紊乱的动画和滚动(Janky animations and scrolling)
概念
长任务(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)
即执行任务的容器清单。针对没有在顶层页面容器内执行的任务,containerId
、containerName
和containerSrc
字段可以用来提供任务源信息。
示例
js
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
-
返回长任务中涉及的工作及其关联的框架上下文信息。
规范
Specification |
---|
Long Tasks API # sec-PerformanceLongTaskTiming |
浏览器兼容性
BCD tables only load in the browser
相关推荐
- GitHub repository 包含文档和代码范例。
- PerfPlanet article on Long Tasks API from 20th December 2017.