blob: 85227ed2a921cf3221c9738ab8e0ef5c7118e3c9 (
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
111
112
113
114
115
116
117
118
119
|
---
title: Long Tasks API
slug: Web/API/Long_Tasks_API
tags:
- API
- Experimental
- Landing
- Long Tasks API
- Overview
- Performance
- PerformanceLongTaskTiming
- Reference
- TaskAttributionTiming
- Web Performance
translation_of: Web/API/Long_Tasks_API
---
<p>{{DefaultAPISidebar("Long Tasks")}}</p>
<h2 id="Motivation" name="Motivation">動機</h2>
<p><span class="seoSummary">実験的な Long Tasks API（長いタスク API）により、50ミリ秒以上かかるタスクを可視化できます。</span> 50ミリ秒のしきい値は、<a href="https://developers.google.com/web/fundamentals/performance/rail">RAIL モデル</a>、特に「<a href="https://developers.google.com/web/fundamentals/performance/rail#response">Response: process events in under 50ms</a>（応答: 50ミリ秒未満でイベントを処理、英語版を参照のこと）」のセクションから来ています。</p>
<p>50ミリ秒以上メインスレッドをブロックするタスクは、次のような問題があります。</p>
<ul>
<li>「{{glossary("Time to interactive","対話までの時間")}}」の遅延</li>
<li>高/可変入力待ち時間</li>
<li>高/可変イベント処理待ち時間</li>
<li>ぎくしゃくしたアニメーションとスクロール</li>
</ul>
<h2 id="Concepts" name="Concepts">概念</h2>
<p>Long Tasks API によって使用されるいくつかの重要な用語またはアイデア。</p>
<dl>
<dt>
<h3 id="Long_task" name="Long_task">長いタスク</h3>
</dt>
</dl>
<p>メイン UI スレッドが50ミリ秒以上ビジーである継続期間。 一般的な例は次のとおりです。</p>
<ul>
<li>長期実行イベントハンドラ</li>
<li>高価なリフローやその他の再レンダリング</li>
<li>50ミリ秒を超えるイベントループの異なるターンの間にブラウザーが実行する作業</li>
</ul>
<h3 id="Culprit_browsing_context_container" name="Culprit_browsing_context_container">犯人の閲覧コンテキストコンテナ</h3>
<p>「犯人の閲覧コンテキストコンテナ（Culprit browsing context container）」、または略して「コンテナ」は、タスクが発生した最上位ページ、iframe、embed、object です。</p>
<h3 id="Attributions" name="Attributions">帰属（Attributions）</h3>
<p>タスクが発生したコンテナのリスト。 トップレベルページ内で発生しないタスクの場合、<code>containerId</code>、<code>containerName</code>、<code>containerSrc</code> の各フィールドは、タスクのソースに関する情報を提供することがあります。</p>
<h2 id="Usage" name="Usage">使用法</h2>
<pre class="brush: js">var observer = new PerformanceObserver(function(list) {
var perfEntries = list.getEntries();
for (var i = 0; i < perfEntries.length; i++) {
// 長いタスク通知を処理します
// 分析とモニタリングについて報告する
// ...
}
});
// 長いタスク通知用のオブザーバーを登録する
observer.observe({entryTypes: ["longtask"]});
// この後スクリプトを長時間実行すると、オブザーバー内で
// "longtask" エントリがキューに入れられ、受信されます。
</pre>
<h2 id="Interfaces" name="Interfaces">インターフェイス</h2>
<dl>
<dt>{{domxref('PerformanceLongTaskTiming')}}</dt>
<dd>長いタスクのインスタンスを報告します。</dd>
<dt>{{domxref("TaskAttributionTiming")}}</dt>
<dd> 長いタスクに関連する作業とそれに関連するフレームコンテキストに関する情報を返します。</dd>
</dl>
<h2 id="Specifications" name="Specifications">仕様</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="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>
<h3 id="PerformanceLongTaskTiming" name="PerformanceLongTaskTiming"><code>PerformanceLongTaskTiming</code></h3>
<div>
<p>{{Compat("api.PerformanceLongTaskTiming")}}</p>
</div>
<h3 id="TaskAttributionTiming" name="TaskAttributionTiming"><code>TaskAttributionTiming</code></h3>
<div>
<p>{{Compat("api.TaskAttributionTiming")}}</p>
</div>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="https://github.com/w3c/longtasks">GitHub リポジトリ</a>にはドキュメントといくつかのコードサンプルが含まれています。</li>
<li>2017年12月20日の Long Tasks API に関する <a href="https://calendar.perfplanet.com/2017/tracking-cpu-with-long-tasks-api/">PerfPlanet の記事</a>。</li>
</ul>
|
