イベントタイミング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 、値がその type の発火したイベント数となるマップである。このマップでカウントされるのは、 type が PerformanceEventTiming エントリ（§ 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 属性値が type に等しいイベントが numEvents 個発火されたことを意味する。 Performance オブジェクトが、その関連グローバルオブジェクトが Window である場合に構築されたとき、その 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 は finalize event timing で “pending” としてマークされ、後で interactionId の算出時に更新される（ keyup や pointerup 等）。
window を event の関連グローバルオブジェクトとする。
pendingKeyDowns を window の pending key downs とする。
pointerMap を window の pointer interaction value map とする。
pendingPointerDowns を window の pending pointer downs とする。
type が keyup である場合:
1. もし event の isComposing 属性値が true であれば、0 を返す。
2. code を event の keyCode 属性値とする。
3. pendingKeyDowns[code] が存在しなければ、0 を返す。
4. entry を pendingKeyDowns[code] とする。
5. interaction count を増加させる（window に対して）。
6. interactionId を window の user interaction value とする。
7. entry の interactionId を interactionId に設定する。
8. entry を window の entries to be queued に追加する。
9. Remove pendingKeyDowns[code]。
10. interactionId を返す。
type が compositionstart である場合:
1. pendingKeyDowns の values の各 entry について：
  1. entry を window の entries to be queued に追加する。
2. pendingKeyDowns をクリアする。
3. 0 を返す。
type が input である場合:
1. event が InputEvent のインスタンスでなければ、0 を返す。注: このチェックは、 Events のうち type が input であっても、修正されたテキスト内容に関係しない場合を除外するため。
2. event の isComposing 属性値が false であれば、0 を返す。
3. interaction count を増加させる（window に対して）。
4. window の user interaction value を返す。
その他（ 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 の user interaction value を返す。
  2. type が pointerup かつ window の is contextmenu triggered フラグが true であれば:
    1. window の is contextmenu triggered フラグを false に設定する。
    2. window の user interaction value を返す。
  3. その他の場合、0 を返す。
5. pointerDownEntry を pendingPointerDowns[pointerId] とする。
6. pointerDownEntry が PerformanceEventTiming エントリであることを確認する。
7. type が pointerup、または contextmenu である場合:
  1. interaction count を増加させる（window に対して）。
  2. pointerMap[pointerId] を window の user interaction value に設定する。
  3. pointerDownEntry の interactionId を pointerMap[pointerId] に設定する。
8. pointerDownEntry を window の entries to be queued に追加する。
9. pendingPointerDowns[pointerId] を削除する。
10. type が contextmenu であれば、window の is contextmenu triggered を true に設定する。
11. type が pointercancel であれば、0 を返す。
12. pointerMap[pointerId] を返す。

注記: このアルゴリズムは、イベントを対応する interaction ID に割り当てようとしています。キーボードイベントでは、keydown が新しい interaction ID を生成し、keyup は以前の keydown に紐付ける必要があります。ポインターイベントでは、pointerdown 時点では pointercancel または pointerup が発生するまでその interactionId を知ることはできません。 click は、前の pointerdown からの interaction ID とマッチさせようとします。 pointercancel または pointerup が発生した場合、interactionId を、保存されていた pointerdown に対応するエントリに設定する準備が整います。 pointercancel であれば、pointerdown に新しい interaction ID を割り当てないことを意味します。 pointerup であれば、新しい interaction 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. relevantGlobal の 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. relevantGlobal のユーザー操作値をユーザーエージェントが選択した小さな値だけ増加させる。
    2. previousKeyDownEntry の interactionId を relevantGlobal のユーザー操作値に設定する。
    注: 229はIMEキーボードイベントに該当する特別なケース。ユーザーエージェントから複数回送信される場合があり、キーの長押しとは対応しない場合もある。
  3. previousKeyDownEntry を relevantGlobal のキューされるエントリに追加する。
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` インターフェイスへの拡張