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 の記事。