PerformanceEntry: startTime プロパティ

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.

startTime プロパティは読み取り専用で、パフォーマンス項目のうち最初に記録されたタイムスタンプを返します。このプロパティの意味は、この項目の entryType の値によって異なります。

値

このパフォーマンス項目が作成されたときの最初のタイムスタンプを表す DOMHighResTimeStamp です。

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

element: この項目の renderTime の値が 0 でない場合はその値、そうでない場合はこの項目の loadTime の値。
event: イベントが作成された時刻、すなわちそのイベントの timeStamp プロパティです。
first-input: 最初の入力イベントが作成された時刻、すなわちそのイベtのの timeStamp プロパティです。
largest-contentful-paint: この項目の renderTime の値が 0 でない場合はその値、そうでない場合はこの項目の loadTime の値。
layout-shift: レイアウトシフトが始まった時刻。
longtask: タスクが始まった時刻。
mark: performance.mark() の呼び出しによってマークが作成された時刻。
measure: performance.measure() の呼び出しによって指標が作成された時刻。
navigation: 常に 0 です。
paint: 描画が発生した時刻。
resource: この項目の fetchStart プロパティの値。
taskattribution: 常に 0 です。
visibility-state: 可視状態の変更が発生した時刻。

例

startTime プロパティの使用

次の例は、パフォーマンス監視中にログ出力することができる startTime プロパティの使用例を示しています。

メモ: performance.mark() メソッドでは、自分自身で startTime を設定することができ、 performance.measure() メソッドでは、測定の開始を設定することができます。

performance.mark("my-mark");
performance.mark("my-other-mark", { startTime: 12.5 });

loginButton.addEventListener("click", (clickEvent) => {
  performance.measure("login-click", { start: clickEvent.timeStamp });
});

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

仕様書

Specification
Performance Timeline # dom-performanceentry-starttime

ブラウザーの互換性

BCD tables only load in the browser