blob: 854aa6ac3872d3a3c40293a867f132b6815f0b7a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
---
title: Long Tasks API
slug: Web/API/Long_Tasks_API
translation_of: Web/API/Long_Tasks_API
---
<p>{{DefaultAPISidebar("Long Tasks")}}</p>
<h2 id="目的">目的</h2>
<p><em>Long Tasks，</em>这是一个实验性API，它可以直观地告诉我们哪些任务执行耗费了50毫秒或更多时间。50毫秒这个阈值标准来源于《<a href="https://developers.google.com/web/fundamentals/performance/rail">RAIL Model</a>》中 <a href="https://developers.google.com/web/fundamentals/performance/rail#response">"Response: process events in under 50ms"</a> 章节。</p>
<p>阻塞主线程达50毫秒或以上的任务会导致以下问题：</p>
<ul>
<li><a href="https://www.w3.org/TR/2017/WD-longtasks-1-20170907/#intro">{{domxref("可交互时间")}} 延迟</a></li>
<li>严重不稳定的交互行为(轻击、单击、滚动、滚轮等)延迟（<a href="https://www.w3.org/TR/2017/WD-longtasks-1-20170907/#intro">High/variable input latency</a>）</li>
<li>严重不稳定的事件回调延迟（<a href="https://www.w3.org/TR/2017/WD-longtasks-1-20170907/#intro">High/variable event handling latency</a>）</li>
<li>紊乱的动画和滚动（<a href="https://www.w3.org/TR/2017/WD-longtasks-1-20170907/#intro">Janky animations and scrolling</a>）</li>
</ul>
<h2 id="概念">概念</h2>
<p>长任务（Long task）API使用的一些关键术语或思想。</p>
<dl>
<dt>
<h3 id="长任务（Long_task）">长任务（Long task）</h3>
</dt>
</dl>
<p>任何连续不间断的且主UI线程繁忙50毫秒及以上的时间区间。比如以下常规场景：</p>
<ul>
<li>长耗时的事件回调（long running event handlers）</li>
<li>代价高昂的回流和其他重绘（expensive reflows and other re-renders）</li>
<li>浏览器在超过50毫秒的事件循环的相邻循环之间所做的工作（work the browser does between different turns of the event loop that exceeds 50 ms）</li>
</ul>
<h3 id="浏览上下文的罪魁容器">浏览上下文的罪魁容器</h3>
<p>浏览上下文的罪魁容器，简称“容器”，指任务发生在其中的顶层页面（the top level page）、iframe、嵌入插槽（embed）或对象（object）。</p>
<h3 id="清单（Attributions）">清单（Attributions）</h3>
<p>即执行任务的容器清单。针对没有在顶层页面容器内执行的任务，<code>containerId</code>、<code>containerName</code>和<code>containerSrc</code>字段可以用来提供任务源信息。</p>
<h2 id="用法">用法</h2>
<pre class="brush: 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.
</pre>
<h2 id="接口">接口</h2>
<dl>
<dt>{{domxref('PerformanceLongTaskTiming')}}</dt>
<dd>返回长任务实例。</dd>
<dt>{{domxref("TaskAttributionTiming")}}</dt>
<dd>返回长任务中涉及的工作及其关联的框架上下文信息。</dd>
</dl>
<h2 id="规范协议">规范协议</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">规范协议</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
<tr>
<td>{{SpecName('Long Tasks')}}</td>
<td>{{Spec2('Long Tasks')}}</td>
<td>初始定义</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<h3 id="PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></h3>
<div>
<p>{{Compat("api.PerformanceLongTaskTiming")}}</p>
</div>
<h3 id="TaskAttributionTiming"><code>TaskAttributionTiming</code></h3>
<div>
<p>{{Compat("api.TaskAttributionTiming")}}</p>
</div>
<h2 id="相关推荐">相关推荐</h2>
<ul>
<li><a href="https://github.com/w3c/longtasks">GitHub repository</a> 包含文档和代码范例。</li>
<li><a href="https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/">PerfPlanet article</a> on Long Tasks API from 20th December 2017.</li>
</ul>
|
