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)

タスクが発生したコンテナのリスト。 トップレベルページ内で発生しないタスクの場合、containerIdcontainerNamecontainerSrc の各フィールドは、タスクのソースに関する情報を提供することがあります。

使用法

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

関連情報