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 2017年9月.
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()の呼び出しによって指標が作成された時刻。 -
常に
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 |
ブラウザーの互換性
Loading…