Long Tasks API
動機
実験的な Long Tasks API（長いタスク API）により、50ミリ秒以上かかるタスクを可視化できます。 50ミリ秒のしきい値は、RAIL モデル、特に「Response: process events in under 50ms（応答: 50ミリ秒未満でイベントを処理、英語版を参照のこと）」のセクションから来ています。
50ミリ秒以上メインスレッドをブロックするタスクは、次のような問題があります。
- 「対話までの時間」の遅延
- 高/可変入力待ち時間
- 高/可変イベント処理待ち時間
- ぎくしゃくしたアニメーションとスクロール
概念
Long Tasks API によって使用されるいくつかの重要な用語またはアイデア。
-
長いタスク
メイン UI スレッドが50ミリ秒以上ビジーである継続期間。 一般的な例は次のとおりです。
- 長期実行イベントハンドラ
- 高価なリフローやその他の再レンダリング
- 50ミリ秒を超えるイベントループの異なるターンの間にブラウザーが実行する作業
犯人の閲覧コンテキストコンテナ
「犯人の閲覧コンテキストコンテナ（Culprit browsing context container）」、または略して「コンテナ」は、タスクが発生した最上位ページ、iframe、embed、object です。
帰属（Attributions）
タスクが発生したコンテナのリスト。 トップレベルページ内で発生しないタスクの場合、containerId、containerName、containerSrc の各フィールドは、タスクのソースに関する情報を提供することがあります。
使用法
var observer = new PerformanceObserver(function(list) {
var perfEntries = list.getEntries();
for (var i = 0; i < perfEntries.length; i++) {
// 長いタスク通知を処理します
// 分析とモニタリングについて報告する
// ...
}
});
// 長いタスク通知用のオブザーバーを登録する
observer.observe({entryTypes: ["longtask"]});
// この後スクリプトを長時間実行すると、オブザーバー内で
// "longtask" エントリがキューに入れられ、受信されます。
インターフェイス
PerformanceLongTaskTiming- 長いタスクのインスタンスを報告します。
TaskAttributionTiming- 長いタスクに関連する作業とそれに関連するフレームコンテキストに関する情報を返します。
仕様
| 仕様 | 状態 | コメント |
|---|---|---|
| Long Tasks API 1 | 草案 | 初期定義 |
ブラウザーの互換性
PerformanceLongTaskTiming
BCD tables only load in the browser
TaskAttributionTiming
BCD tables only load in the browser
関連情報
- GitHub リポジトリにはドキュメントといくつかのコードサンプルが含まれています。
- 2017年12月20日の Long Tasks API に関する PerfPlanet の記事。