PerformanceEntry: startTime プロパティ

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

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

element

この項目の renderTime の値が 0 でない場合はその値、そうでない場合はこの項目の loadTime の値。

event

イベントが作成された時刻、すなわちそのイベントの timeStamp プロパティです。

first-input

最初の入力イベントが作成された時刻、すなわちそのイベtのの timeStamp プロパティです。

largest-contentful-paint

この項目の renderTime (en-US) の値が 0 でない場合はその値、そうでない場合はこの項目の loadTime (en-US) の値。

layout-shift

レイアウトシフトが始まった時刻。

longtask

タスクが始まった時刻。

mark

performance.mark() の呼び出しによってマークが作成された時刻。

measure

performance.measure() の呼び出しによって指標が作成された時刻。

navigation

常に 0 です。

paint

描画が発生した時刻。

resource

この項目の fetchStart プロパティの値。

taskattribution

常に 0 です。

visibility-state

可視状態の変更が発生した時刻。

次の例は、パフォーマンス監視中にログ出力することができる 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"] });