イベントタイミングAPI

1. はじめに

1.1. 概要

このセクションは規範的ではありません。

ユーザーがウェブサイトを操作する際、自分の行動によって素早くウェブサイトが変化することを期待しています。実際、調査によれば、ユーザー入力が100ms以内に処理されない場合は遅いとみなされます。そのため、ガイドラインに達しなかった入力イベントについて、パフォーマンスタイミング情報を表面化することが重要です。

イベントの待ち時間を監視する一般的な方法は、イベントリスナーを登録することです。イベントが生成されたタイムスタンプは、イベントのtimeStampで取得できます。加えて、performance.now()はイベントハンドラーの処理開始時と終了時の両方で呼び出すことができます。ハードウェアのタイムスタンプとイベントハンドラーの開始時に取得したタイムスタンプの差分で、 入力遅延（入力が処理され始めるまでの時間）を算出できます。また、イベントハンドラー開始時と終了時のタイムスタンプの差分で、イベントハンドラー内で同期的に行われた作業量を算出できます。最後に、入力が同期的に処理された場合、イベント処理後の次回ペイントまでの期間はユーザー体験の指標として有用です。

この方法にはいくつか根本的な欠陥があります。第一に、イベントリスナーが必要だと、ページロードの非常に早い段階ではイベント待ち時間の測定ができません。なぜなら、その時点ではリスナーがまだ登録されていない可能性が高いからです。第二に、入力遅延だけに関心がある開発者も、もともとリスナーがなかったイベントに新たにリスナーを追加せざるを得なくなります。これはイベント待ち時間の計算に不要なパフォーマンスオーバーヘッドを追加することになります。さらに、イベントによって発生する非同期処理の計測もこの方法では非常に困難です。

この仕様は、イベント待ち時間の監視の代替手段を提供し、これらの問題の一部を解決します。ユーザーエージェントがタイムスタンプを算出するため、パフォーマンス測定にイベントリスナーが不要です。このため、ページロード非常に早期に発生したイベントも計測できます。また、分析プロバイダがあらゆるイベントをパッチして購読しなくても、遅いイベントを可視化できます。加えて、不要なイベントリスナーによるウェブサイトのパフォーマンス低下も防げます。最後に、この仕様により、イベント処理直後のレンダリングタイミングの詳細情報も取得可能となり、イベントによるウェブサイト変更のオーバーヘッド計測にも役立ちます。

1.2. インタラクション

このセクションは規範的ではありません。

ひとつのユーザーInteraction （ジェスチャとも呼ばれる）は、通常複数の物理的なハードウェア入力イベントで構成されます。各物理入力イベントは、ユーザーエージェントによって複数のUIEventが発行される原因となり、それぞれが複数のカスタムイベントリスナーを発火したり、個別のデフォルトアクションをトリガーする場合があります。

例えば、タッチスクリーンデバイスでユーザーが「タップ」操作を行う場合、実際には一連の物理入力イベントから構成されています：

タッチ開始、
わずかなタッチ移動、
タッチ終了。

これらの物理入力イベントは、UIEventの一連の発行につながります：

pointerdown、
touchstart、
pointermove、
touchmove、
pointerup、
touchend、
click、
...および場合によってはFocusイベントやInputイベントなども間に発行される可能性があります。

これら個々のUIEventは、それぞれが詳細なタイミング測定に役立つ独自のPerformanceEventTimingエントリ報告対象となります。

注: pointermove や touchmove は現時点ではEvent Timingの対象ではありません。

ただし、本仕様では関連するPerformanceEventTimingを Interactionに interactionIdを使ってグループ化する仕組みも定義しています。この仕組みはページ応答性指標 Interaction to Next Paint (INP)の定義にも利用できます。

1.3. 最初の入力

このセクションは規範的ではありません。

最初のユーザーInteraction は、ユーザー体験に格段に大きな影響を与えることが多く、また非常に遅くなりがちです。

このため、Event Timing APIはWindowの最初の入力に関するタイミング情報を公開します。これは、非0のinteractionIdを持つ最初のPerformanceEventTimingエントリとして定義されます。

通常のPerformanceEventTimingエントリと異なり、 最初の入力エントリは、指定されたdurationThresholdを超えなくても報告され、デフォルトの104msのduration thresholdを超えなくてもバッファリングされます。この仕組みは、ページ応答性指標 First Input Delay (FID)の定義に利用できます。

また、イベントハンドラー登録不要でも、常に非常に応答性が高いページも含めてデータ取得できるため、パーセンタイルやパフォーマンス改善の計測にも役立ちます。

1.4. 公開されるイベント

Event Timing APIは特定のイベントのみタイミング情報を公開します。

eventについて、Event Timingの対象かどうかを判断するには、以下の手順を実行します：

eventのisTrusted 属性値がfalseの場合、falseを返す。
eventのtype が以下のいずれかの場合：auxclick、 click、 contextmenu、 dblclick、 mousedown、 mouseenter、 mouseleave、 mouseout、 mouseover、 mouseup、 pointerover、 pointerenter、 pointerdown、 pointerup、 pointercancel、 pointerout、 pointerleave、 gotpointercapture、 lostpointercapture、 touchstart、 touchend、 touchcancel、 keydown、 keypress、 keyup、 beforeinput、 input、 compositionstart、 compositionupdate、 compositionend、 dragstart、 dragend、 dragenter、 dragleave、 dragover、 drop、 trueを返す。
falseを返す。

注: mousemove、 pointermove、 pointerrawupdate、 touchmove、 wheel、 drag は「連続的」イベントであるため除外されています。現在のAPIではこれらイベントのカウントや集計に関する十分なガイダンスがなく、エントリに基づく有意なパフォーマンス指標を得ることが困難なため、これらのイベントタイプは公開されません。

1.5. イベントが測定されるタイミング

このセクションは規範的ではありません。 § 3 処理モデルセクションで公開される情報の概要を説明します。

イベントタイミング情報は特定のイベントのみ公開され、ユーザー入力とその後のペイント操作までの時間差が所定のduration thresholdを超えた場合のみ公開されます。

Event Timing APIは、物理的なユーザー入力発生時点（Eventの timeStampで推定）から、 Eventの関連グローバルオブジェクトの関連付けられたDocumentのレンダリング更新までの時間を duration値として公開します。この値は8ミリ秒単位で提供されます。

デフォルトでは、Event Timing APIはduration が104以上の場合のみエントリをバッファリング・公開しますが、開発者はPerformanceObserverで別のしきい値を設定可能です。ただし、これはバッファリングされるエントリには影響せず、bufferedフラグはデフォルトしきい値以上の過去エントリのみ受け取るために使われます。

Eventの delayは、ブラウザがイベントハンドラーを実行しようとする時刻とEventの timeStampとの差分です。前者はPerformanceEventTimingの processingStartで、後者はstartTimeで公開されます。よって、Eventの delayはprocessingStart - startTimeで計算できます。

Event Timing APIはイベントリスナー有無に関わらずエントリを生成します。特に、最初のクリックや最初のキー入力は、ページ機能に実際にアクセスしようとしたものとは限りません。ユーザーはテキスト選択や空白領域クリックなどをよく行います。これは、イベントリスナー登録が遅すぎるページの問題や、イベントリスナーがなくても意味がある入力（ホバー効果等）のパフォーマンスも捉えるための設計方針です。開発者はprocessingEnd - processingStartがほぼゼロのエントリを無視することで、実質的に処理されていない入力を除外できます。 processingEndはイベント発行アルゴリズムが終了した時刻です。

1.6. 使用例

const observer = new PerformanceObserver(function(list, obs) {
    for (let entry of list.getEntries()) {
        // 入力遅延
        const inputDelay = entry.processingStart - entry.startTime;
        // 処理時間
        const processingDuration = entry.processingEnd - entry.processingStart;
        // 表示遅延 (概算)
        const presentationDelay = Math.max(0, entry.startTime + entry.duration - entry.processingEnd);

        // このイベントのtargetに関する情報（例えばid）を取得
        const targetId = entry.target ? entry.target.id : 'unknown-target';

        console.log(entry.entryType, entry.name, entry.duration, { inputDelay, processingDuration, presentationDelay });
    }
});
observer.observe({ type: 'first-input', buffered: true });
observer.observe({ type: 'event', buffered: true, durationThreshold: 40 });

次の例は、interactionId ごとのイベント最大durationを辞書として計算します。この辞書は集計してアナリティクスに報告することができます。

let maxDurations = {};
new PerformanceObserver(list => {
    for (let entry of list.getEntries()) {
        if (entry.interactionId > 0) {
            let id = entry.interactionId;
            if (!maxDurations[id]) {
                maxDurations[id] = entry.duration;
            } else {
                maxDurations[id] = Math.max(maxDurations[id], entry.duration);
            }
        }
    }
}).observe({ type: 'event', buffered: true, durationThreshold: 16 });

このAPIを利用して達成できるユースケース例：

ウェブサイトの最初の入力遅延データを収集し、パフォーマンスを継続的に追跡する。
ボタンをクリックするとテーブルの並び順が変わる。クリックから並び替え済みコンテンツ表示までの時間を測定。
ユーザーがスライダーをドラッグして音量を調整する。スライダーのドラッグ遅延を測定。
メニュー項目にホバーするとフライアウトメニューが出る。フライアウト表示までの遅延を測定。
最初のユーザークリック（クリックが最初の操作の場合）の遅延の75パーセンタイル値を測定。

2. イベントタイミング

イベントタイミングは以下のインターフェイスを追加します：

2.1. `PerformanceEventTiming` インターフェイス

[Exposed=Window]
interface PerformanceEventTiming : PerformanceEntry {
    readonly attribute DOMHighResTimeStamp processingStart;
    readonly attribute DOMHighResTimeStamp processingEnd;
    readonly attribute boolean cancelable;
    readonly attribute Node? target;
    readonly attribute DOMString targetSelector;
    readonly attribute unsigned long long interactionId;
    [Default] object toJSON();
};

PerformanceEventTiming オブジェクトは、ひとつの対応するEventのタイミング情報を報告します。

各PerformanceEventTiming オブジェクトには、以下の関連する概念があり、すべて初期値はnullです：

関連するNodeを含むeventTarget。

target 属性のgetterは以下の手順を実行します：

thisのeventTargetが、nullで paint timing用に公開されていなければ、nullを返す。
thisのeventTargetを返す。

注: Event Timing APIを実装するユーザーエージェントは first-inputとeventをsupportedEntryTypes に含める必要があります（Windowコンテキスト）。これにより、開発者はイベントタイミングのサポートを検知できます。

このセクションの残りは規範的ではありません。 PerformanceEventTiming 属性値は§ 3 処理モデルで設定されます。ここではそれらがどのように設定されるかの説明をまとめています。

PerformanceEventTiming は、PerformanceEntry インターフェイスの以下の属性を拡張します：

name: name 属性のgetterは、対応するイベントのtypeを返します。
entryType: entryType 属性のgetterは「event」（長いイベントの場合）または「first-input」（最初のユーザー操作の場合）を返します。
startTime: startTime 属性のgetterは、対応するイベントのtimeStampを返します。
duration: duration 属性のgetterは、レンダリング更新が対応するイベントのDocumentでイベント発行後に完了した時刻とstartTimeの差分（8ms単位で丸め）を返します。

PerformanceEventTiming には以下の追加属性があります：

processingStart

processingStart 属性のgetterはイベント発行アルゴリズムの開始時点のタイムスタンプ（イベントハンドラー実行直前）を返します。

processingEnd

processingEnd 属性のgetterはイベント発行アルゴリズムの終了時点のタイムスタンプ（イベントハンドラー実行完了）を返します。イベントハンドラーがなければprocessingStartと同じです。

cancelable

cancelable 属性のgetterは対応するイベントの cancelable属性値を返します。

target

target 属性のgetterは、対応するイベントの最後のtarget（そのNodeが切断されておらず、shadow DOMでもない場合）を返します。

targetSelector

targetSelector 属性のgetterは、文字列を返す。これは、関連付けられたイベントの最後の target を識別する。

interactionId

interactionId 属性のgetterは、関連付けられたイベントを発生させたユーザー Interaction を一意に識別する番号を返す。この属性は、関連付けられたイベントの type 属性値が以下のいずれかでない限り、0である。

pointerdown、 pointerup、 click のいずれかで、タップやドラッグジェスチャに属するもの（ただしpointerdownでスクロールに終わるものは除外）。
keydown またはkeyup で、ユーザーのキープレスに属するもの。

2.2. `EventCounts` インターフェイス

[Exposed=Window]
interface EventCounts {
    readonly maplike<DOMString, unsigned long long>;
};

EventCounts オブジェクトは、キーがイベントタイプ、値がそのtypeで発行されたイベント数のマップです。 PerformanceEventTiming エントリでサポートされるtype （§ 1.4 公開されるイベント参照）のみ、このマップでカウントされます。

2.3. `Performance` インターフェイスへの拡張

[Exposed=Window]
partial interface Performance {
    [SameObject] readonly attribute EventCounts eventCounts;
    readonly attribute unsigned long long interactionCount;
};

eventCounts 属性のgetterは、thisの関連グローバルオブジェクトのeventCountsを返します。

interactionCount 属性のgetterは、thisの関連グローバルオブジェクトのinteractionCountを返します。

3. 処理モデル

3.1. DOM仕様への変更

このセクションは[DOM]が変更されたら削除されます。

イベント発行アルゴリズムを以下のように変更します。

ステップ1直後に、次のステップを追加します：

eventに対し、interactionIdを計算した結果をinteractionIdとする。
event、現在の高精度時刻、およびinteractionIdを用いて、イベントタイミングを初期化した結果をtimingEntryとする。

アルゴリズムの戻り値を返す直前に、次のステップを追加します：

イベントタイミングの完了処理を、 timingEntry、event、target、現在の高精度時刻を引数として呼び出す。

注: ユーザーエージェントがイベント発行アルゴリズムを省略する場合でも、そのEventについてエントリを追加することが可能です。この場合、processingStartの値を推定し、 processingEnd には同じ値を設定します。

3.2. HTML仕様への変更

このセクションは[HTML]が変更されたら削除されます。

各Window には以下の関連する概念があります：

エントリのキュー待ちリスト：PerformanceEventTiming オブジェクトを格納するリスト。初期値は空です。
入力イベント発行済フラグ：初期値falseのブール値。
ユーザーインタラクション値：初期値は100～10000のランダム整数。

注: ユーザーインタラクション値は0ではなくランダム値に設定されます。これにより、開発者がページ内のインタラクション回数のカウントに依存しないようにする意図があります。ランダム値で始めることで、開発者がページ内で発生したインタラクション数の信頼できる情報源として利用しにくくなります。
保留中のキー押下：整数からPerformanceEventTimings へのマップ。初期値は空。
ポインターインタラクション値マップ：整数のマップ。初期値は空。
保留中のポインター押下：整数からPerformanceEventTimings へのマップ。初期値は空。
contextmenu発行済フラグ：初期値falseのブール値。
eventCounts：type→numEvents形式のマップ。これは、type属性値が一致するイベントがnumEvents回発行されたことを示します。 Performance オブジェクトを関連グローバルオブジェクトとして構築する際、 eventCountsは、ユーザーエージェントが§ 1.4 公開されるイベントでサポートするすべてのイベントタイプについて0で初期化されます。
interactionCount：固有のinteractionId が計算された一意なユーザーインタラクション数をカウントする整数。

レンダリング更新ステップで、イベントループ処理モデルの paint timingのマーク呼び出し直後に、次のステップを追加します：

各docs内の完全にアクティブなDocument について、保留中のイベントタイミングエントリの発行アルゴリズムを呼び出す。

3.3. Performance Timeline仕様への変更

このセクションは[PERFORMANCE-TIMELINE-2]が変更されたら削除されます。

PerformanceObserverInit 辞書が拡張されます：

partial dictionary PerformanceObserverInit {
    DOMHighResTimeStamp durationThreshold;
};

3.4. PerformanceEventTiming追加判定

注: 以下のアルゴリズムは[PERFORMANCE-TIMELINE-2]仕様で、 PerformanceEventTiming エントリをPerformanceObserver のバッファまたはパフォーマンスタイムラインに追加する必要があるかどうか（レジストリ参照）を決定する際に使用されます。

PerformanceEventTiming entryとPerformanceObserverInit optionsを入力として、 PerformanceEventTiming追加判定を行うには、以下の手順を実行します：

entryのentryType 属性値が"first-input"の場合、trueを返す。
entryのentryType 属性値が"event"であることを確認（assert）する。
minDurationを以下のように計算する：
1. optionsが未指定、またはoptionsのdurationThreshold が未指定の場合、minDurationは104とする。
2. そうでなければ、minDurationは16とoptionsのdurationThreshold の値の最大値とする。
entryのduration 属性値がminDuration以上の場合、trueを返す。
そうでなければfalseを返す。

3.5. インタラクション数の増加

Window 型のwindowオブジェクトに対し、インタラクション数の増加を求められた場合、次の手順を実行する：

windowのユーザーインタラクション値を、ユーザーエージェントが選択した少量だけ増加させる。
interactionCountをwindowのinteractionCountとする。
interactionCountをinteractionCount+1に設定する。

注: ユーザーインタラクション値は1ではなくユーザーエージェントが選択した少量だけ増加させる。これにより、開発者がウェブアプリケーションで発生したインタラクション数のカウンターとして誤用しにくくしている。ユーザーエージェントはポインター押下時に積極的にユーザーインタラクション値を割り当て、例えばpointercancel後に破棄することもできる（遅延計算ではなく即時割り当て）。

ユーザーエージェントは毎回小さなランダム整数で増加させてもよいし、一定値でもよい。ただしユーザーエージェントは、すべてのWindowで共有されたグローバルなユーザーインタラクション値を使ってはいけない。これはクロスオリジン情報漏洩の原因となる可能性があるためである。

3.6. interactionIdの算出

eventを入力としてinteractionIdの算出を求められた場合、次の手順を実行する：

eventのisTrusted 属性値がfalseなら0を返す。
typeをeventのtype属性値とする。
typeがkeyup、 compositionstart、 input、 pointercancel、 pointerup、 click、またはcontextmenuのいずれでもない場合、0を返す。

注: keydown やpointerdown はイベントタイミングの完了処理でpendingとされ、後からinteractionIdの算出で後続イベント（keyupやpointerupなど）のために更新される。
windowをeventの関連グローバルオブジェクトとする。
pendingKeyDownsをwindowの保留中のキー押下とする。
pointerMapをwindowのポインターインタラクション値マップとする。
pendingPointerDownsをwindowの保留中のポインター押下とする。
typeがkeyupの場合：
1. eventのisComposing 属性値がtrueなら0を返す。
2. codeをeventのkeyCode属性値とする。
3. pendingKeyDowns[code]が存在しなければ0を返す。
4. entryをpendingKeyDowns[code]とする。
5. windowに対しインタラクション数の増加を行う。
6. interactionIdをwindowのユーザーインタラクション値とする。
7. entryのinteractionId をinteractionIdに設定する。
8. entryをwindowのエントリのキュー待ちリストに追加する。
9. pendingKeyDowns[code]を削除する。
10. interactionIdを返す。
typeがcompositionstartの場合：
1. pendingKeyDownsの値ごとにentryについて：
  1. entryをwindowのエントリのキュー待ちリストに追加する。
2. pendingKeyDownsをクリアする。
3. 0を返す。
typeがinputの場合：
1. eventがInputEventのインスタンスでなければ0を返す。注：このチェックにより、typeがinputでもテキスト内容変更と関係ないイベントを除外する。
2. eventのisComposing 属性値がfalseなら0を返す。
3. windowに対しインタラクション数の増加を行う。
4. windowのユーザーインタラクション値を返す。
それ以外の場合（typeがpointercancel、 pointerup、 click、またはcontextmenuの場合）：
1. pointerIdをeventのpointerId属性値とする。
2. typeがclickの場合：
  1. pointerMap[pointerId]が存在しなければ0を返す。
  2. valueをpointerMap[pointerId]とする。
  3. pointerMap[pointerId]を削除する。
  4. valueを返す。
3. typeがpointerup、 pointercancel、またはcontextmenuであることを確認する。
4. pendingPointerDowns[pointerId]が存在しない場合：
  1. typeがcontextmenuの場合、windowのユーザーインタラクション値を返す。
  2. typeがpointerupでwindowのcontextmenu発行済フラグがtrueの場合：
    1. windowのcontextmenu発行済フラグをfalseに設定する。
    2. windowのユーザーインタラクション値を返す。
  3. それ以外は0を返す。
5. pointerDownEntryをpendingPointerDowns[pointerId]とする。
6. pointerDownEntryがPerformanceEventTimingエントリであることを確認する。
7. typeがpointerupまたはcontextmenuの場合：
  1. windowに対しインタラクション数の増加を行う。
  2. pointerMap[pointerId]をwindowのユーザーインタラクション値に設定する。
  3. pointerDownEntryのinteractionIdをpointerMap[pointerId]に設定する。
8. pointerDownEntryをwindowのエントリのキュー待ちリストに追加する。
9. pendingPointerDowns[pointerId]を削除する。
10. typeがcontextmenuの場合、windowのcontextmenu発行済フラグをtrueに設定する。
11. typeがpointercancelの場合、0を返す。
12. pointerMap[pointerId]を返す。

注: このアルゴリズムはイベントを対応するインタラクションIDに割り当てようとする。キーボードイベントでは、keydown で新しいインタラクションIDが発生し、keyup は前のkeydownとID一致させる必要がある。ポインターイベントでは、pointerdown ではpointercancel やpointerup 発生までIDが確定しない。 click は直前のpointerdownのIDと一致させる。 pointercancel やpointerup が起きれば、pointerdownに対応するエントリのIDを設定できる。 pointercancelなら、pointerdownに新しいIDは割り当てない。 pointerupなら新IDを計算し、pointerdownとpointerup両方に設定する（その後clickにも設定可能）。

3.7. イベントタイミングの初期化

イベントタイミングの初期化を、event、processingStart、interactionIdを入力として求められた場合、以下の手順を実行する：

アルゴリズム「eventがEvent Timingの対象かどうか」を実行してfalseなら、nullを返す。
timingEntryをeventの関連realmで新しいPerformanceEventTimingオブジェクトとして生成。
timingEntryのnameにeventのtype属性値を設定。
timingEntryのentryTypeに"event"を設定。
timingEntryのstartTimeにeventのtimeStamp属性値を設定。
timingEntryのprocessingStartにprocessingStartを設定。
timingEntryのcancelableにeventのcancelable属性値を設定。
timingEntryのinteractionIdにinteractionIdを設定。
timingEntryを返す。

3.8. イベントタイミングの完了

イベントタイミングを確定するよう要求されたときは、入力として timingEntry、event、target、processingEnd を受け取り、次の手順を実行する：

もし timingEntry が null なら、return する。
relevantGlobal を target の関連するグローバルオブジェクトとする。
もし relevantGlobal が implements Window でないなら、return する。
timingEntry の processingEnd に processingEnd を設定する。
Assert: target が implements Node である。

注: このアサーションは Event Timing API がサポートするイベント型によって保証される。
timingEntry の関連付けられた eventTarget に target を設定する。

注: これにより eventTarget は最後のイベントターゲットになる。retargeting が発生した場合、root に最も近い最後のターゲットが使われる。
timingEntry の targetSelector に、target を入力として CSSセレクター生成アルゴリズムを実行した結果を設定する。
もし event の type 属性値が pointerdown である場合：
1. pendingPointerDowns を relevantGlobal の保留中pointerdownとする。
2. pointerId を event の pointerId とする。
3. もし pendingPointerDowns[pointerId] が存在するなら：
  1. previousPointerDownEntry を pendingPointerDowns[pointerId] とする。
  2. previousPointerDownEntry を relevantGlobal のキューされるエントリに追加する。
4. pendingPointerDowns[pointerId] に timingEntry を設定する。
5. window の is contextmenu triggered を false に設定する。
それ以外で、event の type 属性値が keydown である場合：
1. もし event の isComposing 属性値が true なら：
  1. timingEntry を relevantGlobal のキューされるエントリに追加する。
  2. return する。
2. pendingKeyDowns を relevantGlobal の保留中keydownとする。
3. code を event の keyCode 属性値とする。
4. もし pendingKeyDowns[code] が存在するなら：
  1. previousKeyDownEntry を pendingKeyDowns[code] とする。
  2. code が 229 でない場合：
    1. window のユーザー操作値をユーザーエージェントが選択した小さな値だけ増加させる。
    2. previousKeyDownEntry の interactionId を window のユーザー操作値に設定する。
    注: 229はIMEキーボードイベントに該当する特別なケース。ユーザーエージェントから複数回送信される場合があり、キーの長押しとは対応しない場合もある。
  3. previousKeyDownEntry を window のキューされるエントリに追加する。
5. pendingKeyDowns[code] に timingEntry を設定する。
それ以外の場合：
1. timingEntry を relevantGlobal のキューされるエントリに追加する。

3.9. 保留中のイベントタイミングエントリの発行

保留中のイベントタイミングエントリの発行を、Document 型のdocについて求められた場合、以下の手順を実行する：

windowをdocの関連グローバルオブジェクトとする。
renderingTimestampを現在の高精度時刻とする。
windowのエントリのキュー待ちリスト内の各timingEntryについて：
1. イベントタイミングエントリのduration設定を、timingEntry、window、renderingTimestampを入力として実行。
2. timingEntryのduration属性値が16以上なら、timingEntryをキューする。
windowのエントリのキュー待ちリストをクリアする。
windowの保留中のポインター押下の値ごとにpendingPointerDownEntryについて：
1. イベントタイミングエントリのduration設定を、pendingPointerDownEntry、window、renderingTimestampを入力として実行。
windowの保留中のキー押下の値ごとにpendingKeyDownEntryについて：
1. イベントタイミングエントリのduration設定を、pendingKeyDownEntry、window、renderingTimestampを入力として実行。

イベントタイミングエントリのduration設定を、PerformanceEventTiming 型のtimingEntry、Window 型のwindow、DOMHighResTimeStamp 型のrenderingTimestampを入力として求められた場合、以下の手順を実行する：

timingEntryのduration属性値が0以外ならreturn。
startをtimingEntryのstartTime属性値とする。
timingEntryのdurationに、DOMHighResTimeStampとしてrenderingTimestamp - start（8ms以下の粒度）を設定。
nameをtimingEntryのname属性値とする。
以下の手順でイベント数を更新：
1. eventCountsをwindowのeventCountsとする。
2. eventCountsがnameを含むことを確認。
3. eventCounts[name]をeventCounts[name]+1に設定。
windowの入力イベント発行済フラグがfalseで、timingEntryのinteractionIdが0でなければ、以下の手順を実行：
1. firstInputEntryをtimingEntryのコピーとする。
2. firstInputEntryのentryTypeに"first-input"を設定。
3. firstInputEntryをキューする。
4. windowの入力イベント発行済フラグをtrueに設定。

3.10. ターゲットセレクター

CSSセレクターを生成するためには、EventTarget target を受け取り、以下の手順を実行する：

もし target が Node であれば、次の手順を実行する：
1. selector を、初期値として target の nodeName の文字列で設定する。
2. もし target が Element であれば、次の手順を実行する：
  1. もし target が `id` 属性を持つなら、selector を « selector、"#"、`id` 属性の値 » の連結で設定する。
  2. それ以外で target が `src` 属性を持つなら、selector を « selector、"[src="、`src` 属性の値、"]" » の連結で設定する。
3. selector を返す。
それ以外の場合、空文字列を返す。

4. セキュリティおよびプライバシーに関する考慮事項

高精度タイマーをウェブプラットフォームに追加することは、セキュリティ上の懸念があるため望ましくありません。イベントハンドラーのタイムスタンプは、performance.now()と同じ精度です。 processingStart やprocessingEnd はこのAPIを使わなくても算出可能なので、これら属性を公開することが新たな攻撃面を生むことはありません。よって、duration のみが追加の考慮を要します。

duration は8ミリ秒の粒度（丸め処理による）で提供されます。そのため、高精度タイマーをこのタイムスタンプから生成することはできません。ただし、イベント処理後のピクセル描画時間という、ウェブ開発者が容易に取得できない新たな情報が公開されます。このタイムスタンプの公開は粒度を考慮すれば、セキュリティやプライバシー上の懸念はないと考えています。有用な新情報を最小限だけ公開する目的で、粒度は8ミリ秒としました。これにより、120Hzディスプレイでも十分に正確なタイミング計測が可能です。

duration のデフォルト閾値104msは、100msを超える最初の8の倍数です。丸め前のdurationが100ms以上であれば、丸め結果も104ms以上となります。このようなイベントは100ms以内に処理されず、ユーザー体験に悪影響を及ぼす可能性があります。

durationThreshold の最小値16msは、応答が滑らかであることを保証する一般的なユースケースのためです。120Hzディスプレイでは、1フレーム以上スキップする応答は16ms以上となり、この値以上のユーザー入力はAPIで取得できます。

イベントタイミングAPI

概要

この文書のステータス

1. はじめに

1.1. 概要

1.2. インタラクション

1.3. 最初の入力

1.4. 公開されるイベント

1.5. イベントが測定されるタイミング

1.6. 使用例

2. イベントタイミング

2.1. `PerformanceEventTiming` インターフェイス

2.2. `EventCounts` インターフェイス

2.3. `Performance` インターフェイスへの拡張

3. 処理モデル

3.1. DOM仕様への変更

3.2. HTML仕様への変更

3.3. Performance Timeline仕様への変更

3.4. PerformanceEventTiming追加判定

3.5. インタラクション数の増加

3.6. interactionIdの算出

3.7. イベントタイミングの初期化

3.8. イベントタイミングの完了

3.9. 保留中のイベントタイミングエントリの発行

3.10. ターゲットセレクター

4. セキュリティおよびプライバシーに関する考慮事項

適合性

文書の慣例

適合アルゴリズム

索引

本仕様で定義されている用語

他の仕様で定義されている用語

参考文献

規定参考文献

IDL索引

イベントタイミングAPI

概要

この文書のステータス

1. はじめに

1.1. 概要

1.2. インタラクション

1.3. 最初の入力

1.4. 公開されるイベント

1.5. イベントが測定されるタイミング

1.6. 使用例

2. イベントタイミング

2.1. PerformanceEventTiming インターフェイス

2.2. EventCounts インターフェイス

2.3. Performance インターフェイスへの拡張

3. 処理モデル

3.1. DOM仕様への変更

3.2. HTML仕様への変更

3.3. Performance Timeline仕様への変更

3.4. PerformanceEventTiming追加判定

3.5. インタラクション数の増加

3.6. interactionIdの算出

3.7. イベントタイミングの初期化

3.8. イベントタイミングの完了

3.9. 保留中のイベントタイミングエントリの発行

3.10. ターゲットセレクター

4. セキュリティおよびプライバシーに関する考慮事項

適合性

文書の慣例

適合アルゴリズム

索引

本仕様で定義されている用語

他の仕様で定義されている用語

参考文献

規定参考文献

IDL索引

2.1. `PerformanceEventTiming` インターフェイス

2.2. `EventCounts` インターフェイス

2.3. `Performance` インターフェイスへの拡張