PerformanceEntry
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.
メモ: この機能はウェブワーカー内で利用可能です。
PerformanceEntry
オブジェクトは、パフォーマンスタイムラインの一部である単一のパフォーマンス指標をカプセル化します。
パフォーマンス API は、 PerformanceEntry
の特殊なサブクラスである組み込み指標を提供します。これには、リソース読み込み、イベント時刻、最初の入力遅延 (FID) などの項目が含まれます。
パフォーマンス項目は、アプリケーション内の明示的な時点で Performance.mark()
または Performance.measure()
メソッドを作成することでも作成できます。これによって、パフォーマンスタイムラインに自分の指標を追加することができます。
PerformanceEntry
インスタンスは常に次のサブクラスのいずれかになります。
インスタンスプロパティ
PerformanceEntry.name
読取専用-
パフォーマンス項目の名前を表す文字列です。この値はサブタイプによって異なります。
PerformanceEntry.entryType
読取専用-
パフォーマンス指標の種類を表す文字列です。たとえば "
mark
" であればPerformanceMark
が使用されています。 PerformanceEntry.startTime
読取専用-
パフォーマンス指標の開始時刻を表す
DOMHighResTimeStamp
です。 PerformanceEntry.duration
読取専用-
パフォーマンスイベントの期間を表す
DOMHighResTimeStamp
です。
インスタンスメソッド
PerformanceEntry.toJSON()
-
PerformanceEntry
オブジェクトの JSON 表現を返します。
例
パフォーマンス項目での作業
次の例では、PerformanceMark
型と PerformanceMeasure
型の PerformanceEntry
オブジェクトを作成します。
PerformanceMark
と PerformanceMeasure
のサブクラスは PerformanceEntry
から duration
、entryType
、name
、startTime
プロパティを継承し、適切な値に設定します。
//コードの ログインを開始する場所に配置する
performance.mark("login-started");
// コードのログインが完了する場所に配置する
performance.mark("login-finished");
// ログイン期間を測定
performance.measure("login-duration", "login-started", "login-finished");
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 |
ブラウザーの互換性
BCD tables only load in the browser