--- 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>