---
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 &lt; 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>