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

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
PerformanceLongTaskTiming
実験的
Chrome 完全対応 58Edge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1348405.
IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1348405.
Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
attribution
実験的
Chrome 完全対応 58Edge ? Firefox 未対応 なしIE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

TaskAttributionTiming

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
TaskAttributionTiming
実験的
Chrome 完全対応 58Edge ? Firefox 未対応 なし
補足
未対応 なし
補足
補足 See bug 1348405.
IE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なし
補足
未対応 なし
補足
補足 See bug 1348405.
Opera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
containerId
実験的
Chrome 完全対応 58Edge ? Firefox 未対応 なしIE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
containerName
実験的
Chrome 完全対応 58Edge ? Firefox 未対応 なしIE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
containerSrc
実験的
Chrome 完全対応 58Edge ? Firefox 未対応 なしIE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり
containerType
実験的
Chrome 完全対応 58Edge ? Firefox 未対応 なしIE ? Opera 完全対応 ありSafari ? WebView Android 完全対応 58Chrome Android 完全対応 58Firefox Android 未対応 なしOpera Android 完全対応 ありSafari iOS ? Samsung Internet Android 完全対応 あり

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。

関連情報