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 2017.
メモ: この機能はウェブワーカー内で利用可能です。
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 |