PerformanceEntry: duration プロパティ

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

duration プロパティは、パフォーマンス項目の時間であるタイムスタンプを返します。このプロパティの意味は、この項目の entryType の値によって異なります。

DOMHighResTimeStamp で、パフォーマンス項目の継続時間を表します。具体的なパフォーマンス指標に長さの概念が適用されない場合は、0 の時間を返します。

このプロパティの意味は、このパフォーマンス項目の entryType の値によって異なります。

event

イベントの startTime から次のレンダリングペイントまでの時間です(8 ミリ秒単位に丸めた値)。

first-input

最初の入力イベントの startTime から次のレンダリングペイントまでの時間です(8 ミリ秒単位に丸めた値)。

longtask

タスクの開始から終わりまでの経過時間です(1 ミリ秒単位)。

measure

測定の時間です。

この項目の loadEventEnd プロパティと startTime プロパティの差です。

resource

この項目の responseEnd 値からこの項目の startTime 値を引いたものです。

以下の種類の項目では duration は適用されず、この場合の値は常に 0 になります。

  • element
  • largest-contentful-paint
  • layout-shift
  • mark
  • paint
  • taskattribution
  • visibility-state

duration プロパティの使用

次の例では、duration0 より大きいパフォーマンス項目をすべてログ出力します。

js
function perfObserver(list, observer) {
  list.getEntries().forEach((entry) => {
    if (entry.duration > 0) {
      console.log(`${entry.name}'s duration: ${entry.duration}`);
    }
  });
}
const observer = new PerformanceObserver(perfObserver);
observer.observe({ entryTypes: ["measure", "mark", "resource"] });

仕様書

Specification
Performance Timeline
# dom-performanceentry-duration

ブラウザーの互換性

BCD tables only load in the browser