Copyright © 2025 World Wide Web Consortium. W3C® liability, trademark and permissive document license rules apply.
この仕様は、High Resolution Time 仕様 [HR-TIME-3] を拡張し、高解像度のパフォーマンス指標データの保存および取得のためのメソッドを提供します。
このセクションは、公開時点での本書のステータスについて説明します。現行の W3C 公開文書一覧や、この技術レポートの最新改訂版は W3C 標準および草案インデックス(https://www.w3.org/TR/)で確認できます。
このパフォーマンスタイムライン仕様は、初版 [PERFORMANCE-TIMELINE] を置き換え、以下を含みます:
Performance
インターフェースの基本定義を
[HR-TIME-3] で拡張PerformanceEntry
を Web Workers で公開 [WORKERS] PerformanceObserver
のサポートを追加この文書は Web Performance Working Group が 勧告トラックを用いて 候補勧告草案として公開したものです。
候補勧告としての公開は、W3C およびその会員による承認を意味しません。候補勧告草案は、ワーキンググループが次回の候補勧告スナップショットに含める予定の変更を前回の候補勧告から統合した文書です。
本書はドラフト文書であり、今後随時更新・置換・廃止される場合があります。進行中の作業以外として引用することは適切ではありません。
本書は、W3C 特許ポリシーのもとで活動するグループによって作成されました。 W3C は、 公開特許開示リストを管理しています。 このページには特許の開示方法についての案内も記載されています。特許に関する実際の知識を持つ個人は、 エッセンシャルクレーム を含むと考えられる場合、W3C特許ポリシー第6節に従って情報開示が必要です。
本書は 2023年11月3日版 W3C プロセス文書に従って管理されています。
このセクションは規範的ではありません。
ウェブアプリケーションのパフォーマンス特性を正確に測定することは、ウェブアプリケーションを高速化する上で重要な要素です。この仕様では、ウェブ開発者がウェブアプリケーションのライフサイクル全体から様々なパフォーマンス指標にアクセス・計測・取得できるようにするための パフォーマンスタイムライン の基本要素を定義しています。
[NAVIGATION-TIMING-2]、[RESOURCE-TIMING-2]、および [USER-TIMING-2] は、それぞれドキュメントのナビゲーション、ページ上のリソース、そして開発者スクリプトに関連するタイミング情報を定義する仕様の例です。これらや他のパフォーマンスインターフェースを組み合わせることで、ウェブアプリケーションの パフォーマンスタイムライン を説明するパフォーマンス指標を定義できます。例えば、次のスクリプトは、開発者がドキュメントのナビゲーション、ページ上のリソース、開発者スクリプトに関連したパフォーマンス指標を取得するために パフォーマンスタイムライン にアクセスする方法を示しています:
<!doctype html>
<html>
<head></head>
<body onload="init()">
<img id="image0" src="https://www.w3.org/Icons/w3c_main.png" />
<script>
function init() {
// see [[USER-TIMING-2]]
performance.mark("startWork");
doWork(); // 開発者コード
performance.mark("endWork");
measurePerf();
}
function measurePerf() {
performance
.getEntries()
.map(entry => JSON.stringify(entry, null, 2))
.forEach(json => console.log(json));
}
</script>
</body>
</html>
また、開発者は パフォーマンスタイムライン を監視し、新しいパフォーマンス指標や、指定された型のバッファ済みパフォーマンス指標の通知を
PerformanceObserver
インターフェース経由で受け取ることもできます。
PerformanceObserver
インターフェースは追加されており、最初の例で示したバッファベースの手法の制限に対応するために設計されています。PerformanceObserver
インターフェースを使うことで、アプリケーションは以下を実現できます:
開発者は可能な限り PerformanceObserver
の利用が推奨されます。さらに、新しいパフォーマンスAPIや指標は PerformanceObserver
インターフェース経由でのみ利用可能な場合があります。オブザーバーは、コンストラクタでコールバックを指定し、observe()
メソッドで興味のあるパフォーマンスエントリを指定することで動作します。
ユーザーエージェントがコールバックの実行タイミングを決定し、キューされたパフォーマンスエントリをコールバックで受け取ります。
PerformanceObserver
インターフェースを使用する場合、初期ページロードに関する特別な考慮事項があります。イベントを受け取るには登録が有効でなければなりませんが、登録スクリプトが利用できない場合やクリティカルパスに含めたくない場合もあります。これに対応するため、ユーザーエージェントはページ構築中に一定数のイベントをバッファし、これらのバッファ済みイベントはオブザーバー登録時の
buffered
フラグを通じて取得できます。
このフラグを設定すると、ユーザーエージェントは指定されたエントリタイプのバッファ済みイベントを取得し、observe()
呼び出し後の最初のコールバックで配信します。
バッファされるイベント数は指標を定義する仕様によって決まり、バッファリングは最初のN件のみを対象としています。バッファは無制限または継続的ではありません。
<!doctype html>
<html>
<head></head>
<body>
<img id="image0" src="https://www.w3.org/Icons/w3c_main.png" />
<script>
// 利用したいエントリタイプがサポートされていない場合を検知する。
function detectSupport(entryTypes) {
for (const entryType of entryTypes) {
if (!PerformanceObserver.supportedEntryTypes.includes(entryType)) {
// |entryType| がサポートされていないことをクライアントサイド解析に通知する。
}
}
}
detectSupport(["resource", "mark", "measure"]);
const userTimingObserver = new PerformanceObserver(list => {
list
.getEntries()
// 必要な値を取得する
.map(({ name, entryType, startTime, duration }) => {
const obj = {
"Duration": duration,
"Entry Type": entryType,
"Name": name,
"Start Time": startTime,
};
return JSON.stringify(obj, null, 2);
})
// コンソールに表示する。
.forEach(console.log);
// イベント処理後に切断。
userTimingObserver.disconnect();
});
// User-Timing の新しいイベントを購読。
userTimingObserver.observe({entryTypes: ["mark", "measure"]});
const resourceObserver = new PerformanceObserver(list => {
list
.getEntries()
// 必要な値を取得する
.map(({ name, startTime, fetchStart, responseStart, responseEnd }) => {
const obj = {
"Name": name,
"Start Time": startTime,
"Fetch Start": fetchStart,
"Response Start": responseStart,
"Response End": responseEnd,
};
return JSON.stringify(obj, null, 2);
})
// コンソールに表示する。
.forEach(console.log);
// イベント処理後に切断。
resourceObserver.disconnect();
});
// バッファ済みイベントの取得と Resource Timing の新しいイベント購読。
resourceObserver.observe({type: "resource", buffered: true});
</script>
</body>
</html>
非規範的と記載されているセクションだけでなく、この仕様に記載されたすべての著者向けガイドライン、図、例、および注記も非規範的です。それ以外のすべては規範的です。
この文書における MUST、MUST NOT、SHOULD というキーワードは BCP 14 [RFC2119] [RFC8174] に記載された通りに解釈されます。 これらのキーワードがすべて大文字で記載されている場合のみ、ここで示すように解釈されます。
アルゴリズムや具体的な手順として表現された適合性要件は、最終的な結果が同等である限り、どのような方法で実装しても構いません。(特に、この仕様で定義されるアルゴリズムは理解しやすくするためのものであり、性能を重視したものではありません)。
各 グローバルオブジェクト は以下を持ちます:
PerformanceEntry
オブジェクトを格納し、初期値は空です。
boolean
型の availableFromTimeline。このエントリタイプのレジストリ値で初期化されます。
各 Document は以下を持ちます:
PerformanceEntry
であり、初期状態では未設定です。
関連するパフォーマンスエントリタプルを取得するには、entryType と globalObject を入力として、次の手順を実行します:
Performance
インターフェースの拡張
これは [HR-TIME-3] の Performance
インターフェースを拡張し、
パフォーマンスタイムラインからパフォーマンス指標データを取得するための属性やメソッドを提供します。
WebIDLpartial interface Performance {
PerformanceEntryList
getEntries
();
PerformanceEntryList
getEntriesByType
(DOMString type);
PerformanceEntryList
getEntriesByName
(DOMString name, optional DOMString type);
};
typedef sequence<PerformanceEntry
> PerformanceEntryList
;
PerformanceEntryList
は
PerformanceEntry
のシーケンスを表し、開発者にJavaScript配列で使える便利なメソッドを提供します。
filter buffer map by name and type
アルゴリズムに name と type を null
にして渡した結果の
PerformanceEntryList
オブジェクトを返します。
name を null
、type をメソッドの入力 type
パラメータとして
filter
buffer map by name and type アルゴリズムに渡した結果の PerformanceEntryList
オブジェクトを返します。
name にメソッド入力の name
パラメータ、type に optional entryType
が省略された場合は null
、そうでない場合はメソッド入力の type
パラメータを設定し、
filter
buffer map by name and type アルゴリズムに渡した結果の PerformanceEntryList
オブジェクトを返します。
PerformanceEntry
インターフェースは様々な指標のパフォーマンスデータを保持します。
WebIDL[Exposed=(Window,Worker)]
interface PerformanceEntry
{
readonly attribute unsigned long long id
;
readonly attribute DOMString name
;
readonly attribute DOMString entryType
;
readonly attribute DOMHighResTimeStamp startTime
;
readonly attribute DOMHighResTimeStamp duration
;
[Default] object toJSON
();
};
name
PerformanceEntry
オブジェクトの識別子を表します。この識別子は一意である必要はありません。
entryType
すべての entryType
の値は関連するレジストリで定義されています。
例:"mark"
、"measure"
[USER-TIMING-2]、"navigation"
[NAVIGATION-TIMING-2]、
"resource"
[RESOURCE-TIMING-2] など。
startTime
duration
duration
属性のgetterの手順は、this の end
time
が 0 の場合は 0 を返し、そうでない場合は this の
end
time - this の startTime
を返します。
navigationId
toJSON
が呼び出されたときは、[WebIDL] の default toJSON
steps を実行します。
PerformanceEntry
は DOMHighResTimeStamp
型の
end time を持ち、初期値は 0 です。
PerformanceEntry
を初期化するには
entry、DOMHighResTimeStamp
startTime、
DOMString
entryType、DOMString
name、およびオプションの DOMHighResTimeStamp
endTime(デフォルトは 0
)を与え、以下の手順で行います:
startTime
を
startTime で初期化する。
entryType
を
entryType で初期化する。
name
を
name で初期化する。
PerformanceObserver
インターフェースは
パフォーマンスタイムライン
を監視し、新しいパフォーマンス指標が記録された際や、バッファ済みのパフォーマンス指標があれば通知を受け取るために利用できます。
各 PerformanceObserver
には以下の概念が関連付けられます:
PerformanceObserverCallback
作成時に設定されるオブザーバーコールバック
PerformanceEntryList
オブジェクトであるオブザーバーバッファ(初期値は空)
"undefined"
の DOMString
型 オブザーバータイプ
PerformanceObserver(callback)
コンストラクタは、新しい
PerformanceObserver
オブジェクトを生成し、その オブザーバーコールバック
を callback に設定して返します。
登録済みパフォーマンスオブザーバー は 構造体 であり、
observer メンバー(PerformanceObserver
オブジェクト)と options
list メンバー(
PerformanceObserverInit
辞書のリスト)で構成されます。
WebIDLcallback PerformanceObserverCallback
= undefined (PerformanceObserverEntryList
entries,
PerformanceObserver
observer,
optional PerformanceObserverCallbackOptions
options = {});
[Exposed=(Window,Worker)]
interface PerformanceObserver
{
constructor
(PerformanceObserverCallback
callback);
undefined observe
(optional PerformanceObserverInit
options = {});
undefined disconnect
();
PerformanceEntryList
takeRecords
();
[SameObject] static readonly attribute FrozenArray<DOMString> supportedEntryTypes
;
};
パフォーマンスのオーバーヘッドを最小限に抑えるため、アプリケーションは必要なイベントタイプのみを購読し、パフォーマンスデータの監視が不要になったらオブザーバーを切断するべきです。名前によるフィルタリングはサポートされていません。これは全てのイベントタイプの購読を必要とし、可能ではあるものの推奨されません。大量のイベントが生成されるためです。
WebIDLdictionary PerformanceObserverCallbackOptions
{
unsigned long long droppedEntriesCount
;
};
droppedEntriesCount
PerformanceObserver
の requires dropped entries
が設定されている場合)。
observe()
メソッドはユーザーエージェントにオブザーバー登録を指示し、以下の手順を実行します:
entryTypes
および type
の両方が省略された場合、throw "TypeError
"
を発生させる。
entryTypes
が存在し、他のメンバーも存在する場合、throw "TypeError
"
を発生させる。
"undefined"
の場合:
entryTypes
が存在する場合、this
の observer type を "multiple"
に設定する。
type
が存在する場合、this の observer type を "single"
に設定する。
"single"
かつ options の entryTypes
が存在する場合、throw
"InvalidModificationError
"
を発生させる。
"multiple"
かつ options の type
が存在する場合、throw "InvalidModificationError
"
を発生させる。
"multiple"
の場合、以下の手順を実行:
entryTypes
シーケンスとする。
"single"
であることを確認する。
type
が
relevantGlobal の 対応エントリタイプの凍結配列
に含まれていない場合、これらの手順を中止する。ユーザーエージェントはこの際に開発者へ通知することが推奨されます。例としてコンソール警告など。
PerformanceObserverInit
の
currentOptions で、type
が
options の type
と等しいものが含まれている場合、
obs の options list で
currentOptions を options に置き換える。
buffered
フラグが設定されている場合:
type
および
relevantGlobal)とする。
tuple の パフォーマンスエントリバッファ の各 entry について:
PerformanceObserver
オブジェクトは
options の entryTypes
を設定して observe()
を常に呼び出すか、または
options の type
を設定して
observe()
を呼び出す必要があります。
1つの PerformanceObserver
が observe()
を entryTypes
で呼び出し、さらに type
でも呼び出した場合、例外が発生します。これは呼び出しの重ね方による混乱を避けるためです。entryTypes
を使う場合、他のパラメータは使えません。また、複数回の observe()
呼び出しは上書きされます(後方互換性・単一呼び出しで十分なため)。一方 type
の場合は呼び出しが積み重なり、1回の呼び出しで1タイプのみ指定可能です。同じ type
で呼び出した場合も上書きされます。
WebIDLdictionary PerformanceObserverInit
{
sequence<DOMString> entryTypes
;
DOMString type
;
boolean buffered
;
};
entryTypes
type
buffered
WebIDL[Exposed=(Window,Worker)]
interface PerformanceObserverEntryList
{
PerformanceEntryList
getEntries
();
PerformanceEntryList
getEntriesByType
(DOMString type);
PerformanceEntryList
getEntriesByName
(DOMString name, optional DOMString type);
};
各 PerformanceObserverEntryList
オブジェクトには
entry list
が関連付けられており、これは PerformanceEntryList
で構成され、構築時に初期化されます。
filter
buffer by name and type アルゴリズムに this の entry list
と、name、type に null
を渡した結果の PerformanceEntryList
オブジェクトを返します。
filter
buffer by name and type アルゴリズムに this の entry list
と、name に null
、type にメソッド入力の type
パラメータを渡した結果の PerformanceEntryList
オブジェクトを返します。
filter
buffer by name and type アルゴリズムに this の entry list
と、name にメソッド入力の name
パラメータ、type に optional
entryType
を省略した場合は null
、そうでない場合はメソッド入力の type
パラメータを渡した結果の
PerformanceEntryList
オブジェクトを返します。
takeRecords()
メソッドは this の オブザーバーバッファ のコピーを返し、さらに this の オブザーバーバッファ を空にします。
disconnect()
メソッドは以下を実行します:
supportedEntryTypes
属性各 グローバルオブジェクト には サポートされているエントリタイプの凍結配列 が関連付けられており、これは FrozenArray に 作成された、レジストリ内のグローバルオブジェクトに対応するサポート済み文字列をアルファベット順に並べたシーケンスから初期化されます。
supportedEntryTypes
属性のgetterが呼ばれたとき、次の手順を実行します:
この属性により、ウェブ開発者はユーザーエージェントがサポートするエントリタイプを簡単に知ることができます。
PerformanceEntry をキューイングする (newEntry) には、以下の手順を実行します:
id
が未設定の場合:
PerformanceObserver
オブジェクト集合とする。
entryType
値とする。
navigationId
を
relevantGlobal の 関連付けられたドキュメント
の 最新ナビゲーション の id
の値に設定する。
navigationId
を null に設定する。
regObs の options list に PerformanceObserverInit
options で、entryTypes
メンバーに entryType が含まれるか、type
メンバーが
entryType と等しいものがあれば:
PerformanceObserver タスクのキューイング では、relevantGlobal を入力として、以下の手順を実行します:
PerformanceObserverEntryList
とし、
その entry list を entries に設定する。
PerformanceObserverInit
item について:
type
または entryTypes
に登場する各 DOMString
entryType について:
PerformanceObserverCallbackOptions
とし、
その droppedEntriesCount
を droppedEntriesCount が null でなければその値、そうでなければ未設定とする。report
"、po を渡す。
パフォーマンスタイムライン タスクキュー は低優先度のキューで、パフォーマンス監視コードの影響を最小限にするため、可能な限りアイドル期間に処理されるべきです。
バッファマップを名前と型でフィルタ アルゴリズムを optional name と type で実行する場合、以下の手順を実行します:
startTime
を基準に時系列順にソートする。
バッファを名前と型でフィルタ アルゴリズムを buffer、name、type で実行する場合、以下の手順を実行します:
パフォーマンスエントリバッファが満杯かどうかの判定 は tuple を入力として、以下の手順を実行します:
IDの生成 を PerformanceEntry
entry に対して実行する場合、以下の手順を実行します:
ユーザーエージェントは last performance entry id を毎回少しの乱数で増加させてもよい。ユーザーエージェントは全グローバルオブジェクトの last performance entry id を同じ値でまとめて増やしてはならない(クロスオリジン漏洩の原因となるため)。
last performance entry id は初期値が乱数で、ユーザーエージェントが毎回1ではなく少しの数値で増加させることで、開発者がウェブアプリケーションで生成されたエントリ数のカウンタと誤認しないようにしています。
この仕様は [HR-TIME-3] で定義された Performance
インターフェースを拡張し、パフォーマンスタイムライン
からエントリをキューイング・取得するためのメソッドを提供します。高精度タイミング情報の公開に関するプライバシー考慮事項については [HR-TIME-3]
を参照してください。新たにパフォーマンスエントリを導入する各仕様も、それぞれ独自のプライバシー考慮事項を持つべきです。
last performance entry id は意図的に乱数で初期化され、PerformanceEntry
がキューイングされるたびにさらに小さな値で増加します。ユーザーエージェントはすべてのユーザーに対して一律の増加値を使うことも、各 グローバルオブジェクトごとに異なる増加値を選択することも、各
PerformanceEntry
ごとに新たな乱数の増加値を選ぶことも可能です。ただし、クロスオリジン漏洩やフィンガープリンティングを防ぐため、ユーザーエージェントは単一のユニークな乱数を選んで全 PerformanceEntry
オブジェクトを全 グローバルオブジェクトにわたって一貫して増加させてはなりません。
この仕様は [HR-TIME-3] で定義された Performance
インターフェースを拡張し、パフォーマンスタイムライン
からエントリをキューイング・取得するためのメソッドを提供します。高精度タイミング情報の公開に関するセキュリティ考慮事項については [HR-TIME-3]
を参照してください。新たにパフォーマンスエントリを導入する各仕様も、それぞれ独自のセキュリティ考慮事項を持つべきです。
WebIDLpartial interface Performance {
PerformanceEntryList
getEntries
();
PerformanceEntryList
getEntriesByType
(DOMString type);
PerformanceEntryList
getEntriesByName
(DOMString name, optional DOMString type);
};
typedef sequence<PerformanceEntry
> PerformanceEntryList
;
[Exposed=(Window,Worker)]
interface PerformanceEntry
{
readonly attribute unsigned long long id
;
readonly attribute DOMString name
;
readonly attribute DOMString entryType
;
readonly attribute DOMHighResTimeStamp startTime
;
readonly attribute DOMHighResTimeStamp duration
;
readonly attribute unsigned long long navigationId
;
[Default] object toJSON
();
};
callback PerformanceObserverCallback
= undefined (PerformanceObserverEntryList
entries,
PerformanceObserver
observer,
optional PerformanceObserverCallbackOptions
options = {});
[Exposed=(Window,Worker)]
interface PerformanceObserver
{
constructor
(PerformanceObserverCallback
callback);
undefined observe
(optional PerformanceObserverInit
options = {});
undefined disconnect
();
PerformanceEntryList
takeRecords
();
[SameObject] static readonly attribute FrozenArray<DOMString> supportedEntryTypes
;
};
dictionary PerformanceObserverCallbackOptions
{
unsigned long long droppedEntriesCount
;
};
dictionary PerformanceObserverInit
{
sequence<DOMString> entryTypes
;
DOMString type
;
boolean buffered
;
};
[Exposed=(Window,Worker)]
interface PerformanceObserverEntryList
{
PerformanceEntryList
getEntries
();
PerformanceEntryList
getEntriesByType
(DOMString type);
PerformanceEntryList
getEntriesByName
(DOMString name, optional DOMString type);
};
この文書の作成にあたり、Arvind Jain、Boris Zbarsky、Jatinder Mann、Nat Duca、Philippe Le Hegaret、Ryosuke Niwa、Shubhie Panicker、Todd Reifsteck、Yoav Weiss、Zhiheng Wang の皆様の貢献に感謝します。
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in:
Referenced in: