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 2017年9月.
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 |
ブラウザーの互換性
Loading…