Performance: mark() メソッド
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.
mark()
メソッドは、名前付き PerformanceMark
オブジェクトを生成し、ブラウザーのパフォーマンスタイムラインに高解像度のタイムスタンプマーカーを表示します。
構文
mark(name)
mark(name, markOptions)
引数
name
-
文字列で、マークの名前を表します。非推奨の
PerformanceTiming
インターフェイスのプロパティのいずれかと同じ名前であってはいけません。 markOptions
省略可-
このマークのためにタイムスタンプと追加のメタデータを指定するためのオブジェクトです。
detail
省略可-
マークに含める任意のメタデータです。既定値は
null
です。構造化クローン可能でなければなりません。 startTime
省略可-
マークの時刻として使用する
DOMHighResTimeStamp
です。既定値はperformance.now()
です。
返値
生成された PerformanceMark
項目です。
例外
SyntaxError
:name
が非推奨のPerformanceTiming
インターフェイスのプロパティのいずれかである場合に発生します。下記の例を参照してください。TypeError
:startTime
が負の場合に発生します。
例
名前付きのマーカーを生成
次の例では、mark()
を使用して名前付き PerformanceMark
項目を作成しています。同じ名前のマークを複数作成することができます。また、それらを割り当てて、作成した PerformanceMark
オブジェクトへの参照を保有することもできます。
performance.mark("login-started");
performance.mark("login-started");
performance.mark("login-finished");
performance.mark("form-sent");
const videoMarker = performance.mark("video-loaded");
詳細付きのマーカーを生成
パフォーマンスマークは markOptions
オブジェクトを使用して設定することができ、detail
プロパティに任意の型の追加情報を入力することができます。
performance.mark("login-started", {
detail: "ログインはトップメニューのログインボタンを使用して開始されました。",
});
performance.mark("login-started", {
detail: { htmlElement: myElement.id },
});
開始時刻付きのマーカーを作成
mark()
メソッドの既定では、タイムスタンプは performance.now()
です。markOptions
の startTime
オプションを使用すると、別の時刻に設定することができます。
performance.mark("start-checkout", {
startTime: 20.0,
});
performance.mark("login-button-pressed", {
startTime: myEvent.timeStamp,
});
予約済みの名前
後方互換性を保つため、非推奨の PerformanceTiming
インターフェイスの一部である名前は使用できないことに注意してください。次の例は例外が発生します。
performance.mark("navigationStart");
// SyntaxError: "navigationStart" is part of
// the PerformanceTiming interface,
// and cannot be used as a mark name
仕様書
Specification |
---|
User Timing # dom-performance-mark |
ブラウザーの互換性
BCD tables only load in the browser