Event Timing API

Given an event , to determine if it should be considered for Event Timing , run the following steps:

1. If event ’s isTrusted attribute value is set to false, return false.

2. If event ’s type is one of the following: 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 , return true.

3. Return false.

const observer = new PerformanceObserver(function(list, obs) {
    for (let entry of list.getEntries()) {
        // Input Delay
        const inputDelay = entry.processingStart - entry.startTime;
        // Processing duration
        const processingDuration = entry.processingEnd - entry.processingStart;
        // Presentation Delay (approximate)
        const presentationDelay = Math.max(0, entry.startTime + entry.duration - entry.processingEnd);
        // Obtain some information about the target of this event, such as the 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 });

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 });

[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();
};

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

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

We modify the event dispatch algorithm given event as follows.

Right after step 1, we add the following steps:

1. Let interactionId be the result of computing interactionId given event . Let timingEntry be the result of initializing and recording event timing processing start given event , and the current high resolution time , and interactionId . .

Right before the returning step of that algorithm, add the following step:

1. Finalize Record event timing processing end passing given timingEntry , event , target , and the current high resolution time as inputs.

In the update the rendering step within the event loop processing model , add a step right after the step that calls mark paint timing :

1. For each fully active Document doc that is either removed from docs (due to being non-renderable or unnecessary) or is fully active in docs , invoke (after calling mark paint timing ), run the algorithm to dispatch pending following steps:

   1. Record event timing render time for doc with the current high resolution time .

   2. Flush Event Timing entries for that Document . doc .

partial dictionary PerformanceObserverInit {
    DOMHighResTimeStamp durationThreshold;
};

To initialize and record event timing processing start given entry event and processingStartTimestamp :

1. If event should not be considered for Event Timing , return null.

2. Let timingEntry be a new PerformanceObserverInit PerformanceEventTiming options , to determine if we should add PerformanceEventTiming , object with entry event and optionally ’s relevant realm .

3. Set options timingEntry as inputs, run the following steps: ’s associated event to event .

4. If Set entry timingEntry ’s entryType entry type attribute value equals to " first - input event ", return true. ".

5. Assert that Set entry timingEntry ’s entryType processing start timestamp attribute value equals " to processingStartTimestamp .

6. Set timingEntry ’s interactionId to the result of compute interactionId given event ". and timingEntry .

7. Let minDuration window be computed as follows: event ’s relevant global object .

8. If options window is does not present or if implement Window , return null.

9. Let options type be event ’s durationThreshold type is not present, let .

10. Let minDuration event counts be 104. window ’s event counts .

11. Otherwise, let Assert that minDuration event counts be the maximum between 16 Contains type .

12. Set event counts [ type ] to event counts [ type ] + 1.

13. If window ’s has dispatched input event is false and options timingEntry ’s durationThreshold interactionId value. is not 0, run the following steps:

    1. If Set entry window ’s has dispatched input event to true.

    Note: has dispatched input event is set to true as soon as an interactive event is initialized. For duration pointerdown attribute value entries, interactionId is greater than or equal to minDuration , return true. still unknown at this point, but other specifications (such as Largest Contentful Paint ) which use this, will observe both pointer interactions and scroll as input, anyway.

14. Otherwise, return false. Return timingEntry .

To record event timing processing end given a Window window object, perform the following steps: timingEntry , target , and processingEndTimestamp :

1. Increase If window timingEntry ’s user interaction value value by a small number chosen by the user agent. is null, then return.

2. Let interactionCount relevantGlobal be window target ’s interactionCount relevant global object .

3. Set interactionCount timingEntry ’s processing end timestamp to interactionCount processingEndTimestamp .

4. Assert that target + 1. implements Node .

   Note: The user interaction value is increased by a small number chosen by the user agent instead of 1 This assertion holds due to discourage developers from considering it as a counter of the number types of user interactions that have occurred in the web application. This allows events supported by the user agent to choose to eagerly assign a user interaction value Event Timing API.

5. Set timingEntry ’s eventTarget (i.e. at pointerdown) and then discard it (i.e. after pointercancel), rather than to lazily compute it. target .

6. A user agent may choose Append timingEntry to increase it by a small random integer every time, or choose a constant. A user agent must not use a shared global user interaction value relevantGlobal ’s pending Event Timing entries .

To record event timing render time given a Windows Document , because this could introduce cross-origin leaks. doc and a renderingTimestamp :

1. Let window be doc ’s relevant global object .

2. For each timingEntry in window ’s pending Event Timing entries :

   1. If timingEntry ’s render time is 0, set timingEntry ’s render time to renderingTimestamp .

To compute interactionId with event as input, run the following steps: If given an Event event ’s and a isTrusted PerformanceEventTiming attribute value is false, return 0. entry :

1. Let type be event ’s type attribute value.

2. If type is not one among keyup keydown , compositionstart keypress , keyup , input , pointerdown , pointercancel , pointerup , click , or contextmenu , return 0.

   Note: keydown and pointerdown are marked pending in finalize event timing , and then updated later when computing interactionId for future events (like keyup and pointerup ).

3. Let window be event ’s relevant global object .

4. Let pendingKeyDowns be window ’s pending key downs . Let pointerMap be window ’s pointer interaction value map . Let pendingPointerDowns newInteractionId be window ’s pending pointer downs . null.

5. If type event is a keyup PointerEvent : If and event ’s isComposing pointerId attribute value is true, return 0. greater than or equal to 0:

   1. Let code be Set event newInteractionId ’s keyCode to the result of compute pointer interactionId attribute value. If given pendingKeyDowns [ window , code ] does not exist, return 0. Let event , and entry be pendingKeyDowns [ code ]. Increase interaction count on window .

6. Let interactionId be window ’s user interaction value value. Else:

   1. Set entry newInteractionId ’s interactionId to the result of computing the keyboard interactionId . Add entry to window ’s entries to be queued . Remove given pendingKeyDowns [ code window ]. Return and interactionId event .

   If

Note: At this point, newInteractionId can be null only if type is compositionstart pointerdown : . Keyboard interactions and other pointer interactions either compute a valid ID or fallback to 0 directly in their respective sub-algorithms.

1. For each Return entry in newInteractionId .

To get the values next interactionId for a Window of pendingKeyDowns window :

1. Append Set entry window ’s interaction count to window ’s entries to be queued . Clear interaction count pendingKeyDowns . plus 1.

2. Return 0. If type window is input ’s initial interactionId value : If plus ( event window is not an instance of InputEvent ’s interaction count , return 0. Note: This check is done to exclude times window ’s interactionId increment ).

To compute pointer interactionId given a Events Window for which the window , an type Event is event , and a input PerformanceEventTiming but that are not about modified text content. entry :

1. If Let type be event ’s isComposing type attribute value is false, return 0. value.

2. Let pointerId be event ’s Increase interaction count pointerId on window . attribute value.

3. Return Let activePointerInteractions be window ’s user active pointer interaction value map .

4. Otherwise ( Let type pendingPointerDowns is pointercancel , pointerup , click , or contextmenu ): be window ’s pending pointerdown map .

5. Let pointerId newInteractionId be event ’s pointerId attribute value. null.

6. If type is click pointerdown :

   1. If pointerMap pendingPointerDowns [ pointerId ] does not exist, return 0. exists:

      1. Let Run resolve pending pointerdown given value window be and pointerMap pendingPointerDowns [ pointerId ].

   2. Remove Set pointerMap pendingPointerDowns [ pointerId ]. Return ] to value entry .

7. Assert that Else if type is pointerup , pointercancel contextmenu , or contextmenu click . :

   1. If pendingPointerDowns [ pointerId ] does not exist: exists:

      1. If Set type newInteractionId is contextmenu to the result of resolve pending pointerdown , return given window ’s user interaction value . and pendingPointerDowns [ pointerId ].

   2. If type newInteractionId is pointerup null and window activePointerInteractions ’s is contextmenu triggered flag is true: [ pointerId ] exists:

      1. Set window newInteractionId ’s is contextmenu triggered flag to false. Return window ’s user interaction value . Otherwise, return 0. Let pointerDownEntry be pendingPointerDowns activePointerInteractions [ pointerId ].

   3. Assert that If pointerDownEntry newInteractionId is a null:

      1. Set newInteractionId to the result of getting the next interactionId given window .

      Note: Most pointer interactions are expected to have an associated PerformanceEventTiming pointerdown entry. event, which would have assigned an interactionId in the steps above. However, some special input devices (for example, accessibility-related software) can simulate certain trusted pointer events without following the usual event sequence.

8. If Else if type is pointerup or contextmenu pointercancel :

   1. Increase interaction count on window . Set If pointerMap pendingPointerDowns [ pointerId ] to window ’s user interaction value . exists:

      1. Set pointerDownEntry ’s interactionId to pointerMap pendingPointerDowns [ pointerId ]. Append pointerDownEntry to window ’s entries ]'s interactionId to be queued . 0.

      2. Remove pendingPointerDowns [ pointerId ].

   2. If type is contextmenu , set Set window newInteractionId ’s is contextmenu triggered to true. If type is pointercancel , return 0.

9. Return pointerMap [ pointerId ]. newInteractionId .

To resolve pending pointerdown given a keyup Window has to match its ID with a previous keydown . For pointer events, when we get window and a pointerdown we have to wait until pointercancel PerformanceEventTiming or pointerup pointerDownEntry :

1. Let newInteractionId be the result of getting the next interactionId occur to know its given window .

2. Set pointerDownEntry ’s interactionId . We try to match click with a previous interaction ID from a pointerdown . If pointercancel or pointerup happens, we’ll newInteractionId .

3. Let pointerId be ready to set the interactionId pointerDownEntry ’s associated event for the stored entry corresponding to ’s pointerdown pointerId . If it is pointercancel , this means we do not want to assign a new

4. Set window ’s active pointer interaction ID map [ pointerId ] to the newInteractionId .

5. pointerdown Remove . If it is pointerup window ’s pending pointerdown map , we [ pointerId ].

6. Return newInteractionId .

To compute a new interaction ID and set it on both the keyboard interactionId given a pointerdown Window window and the pointerup (and later, the an click Event if it occurs). 3.7. Initialize event timing When asked to initialize event timing , with event , processingStart , and interactionId as inputs, run the following steps: :

1. If the algorithm to determine if Let event type should be considered for Event Timing event ’s type returns false, then return null. attribute value.

2. Let timingEntry activeKeyInteractions be a new PerformanceEventTiming object with event window ’s relevant realm active key interaction map .

3. Set Let timingEntry newInteractionId ’s name to be null.

4. If event type ’s is type keydown attribute value. :

   1. Set timingEntry newInteractionId ’s entryType to " event ". the result of getting the next interactionId given window .

   2. Set timingEntry activeKeyInteractions ’s startTime to [ event ’s timeStamp keyCode attribute value. ] to newInteractionId .

   3. Set timingEntry window ’s processingStart last keydown interactionId to processingStart newInteractionId .

      Set timingEntry ’s

   Note: last keydown interactionId is used to attribute simulated cancelable click to event ’s or cancelable contextmenu attribute value. Set timingEntry ’s events (which lack a interactionId keyCode to interactionId . Return timingEntry . 3.8. ), as well as Finalize event timing input events (which follow a keydown When asked ), back to finalize event timing , with timingEntry , event , target , and processingEnd as inputs, run the following steps: originating keyboard interaction.

5. If Else if timingEntry type is null, then return. keypress :

   1. Let relevantGlobal keyCode be target event ’s relevant global object . keyCode attribute value.

   2. If relevantGlobal activeKeyInteractions does not implement Window , return. [ keyCode ] exists:

      1. Set timingEntry newInteractionId ’s processingEnd to processingEnd . activeKeyInteractions [ keyCode ].

   3. Assert that Else if target window implements Node ’s last keydown interactionId . is not 0:

      Note: This assertion holds due

      1. Set newInteractionId to the types of events supported by the Event Timing API. window ’s last keydown interactionId .

   4. Else:

      1. Set timingEntry newInteractionId ’s eventTarget to target . 0.

   Note: This will set eventTarget to the last event target. So if retargeting fallback for keypress occurs, the last target, closest to events is necessary because the root , will be used. Set timingEntry ’s targetSelector keyCode to the result of running the algorithm to generate a CSS selector keypress with target as input. If event ’s might differ from that of the preceding type keydown attribute value is event. [UIEVENTS] recommends using the pointerdown code : attribute to avoid such inconsistencies (see UI Events section on code motivation ).

6. Let pendingPointerDowns be Else if relevantGlobal type ’s pending pointer downs . is keyup :

   1. Let pointerId keyCode be event ’s pointerId keyCode . attribute value.

   2. If pendingPointerDowns activeKeyInteractions [ pointerId keyCode ] exists:

      1. Let Set previousPointerDownEntry newInteractionId be to pendingPointerDowns activeKeyInteractions [ pointerId keyCode ].

   3. Add previousPointerDownEntry to Else:

      1. Set relevantGlobal newInteractionId ’s entries to be queued . 0.

   4. Set pendingPointerDowns [ pointerId window ] ’s last keyup interactionId to timingEntry newInteractionId .

   5. Set relevantGlobal window ’s is contextmenu triggered last keydown interactionId to false. 0.

7. Otherwise, Else if event ’s type attribute value is keydown input :

   1. If event window ’s isComposing last keydown interactionId attribute value is true : not 0:

      1. Append Set timingEntry newInteractionId to relevantGlobal window ’s entries to be queued last keydown interactionId .

      2. Return. Set window ’s last keydown interactionId to 0.

   2. Let Else:

      1. Set pendingKeyDowns newInteractionId be to the result of getting the next interactionId given relevantGlobal ’s pending key downs . window .

8. Let code be Else if event type ’s is keyCode click attribute value. or contextmenu :

   1. If pendingKeyDowns [ code window ] exists: ’s last keydown interactionId is not 0:

      1. Let previousKeyDownEntry be Set pendingKeyDowns newInteractionId [ to code window ]. ’s last keydown interactionId .

   2. If Else if code window ’s last keyup interactionId is not 229: 0:

      1. Increase relevantGlobal ’s user interaction value value by a small number chosen by the user agent. Set previousKeyDownEntry newInteractionId ’s interactionId to relevantGlobal window ’s user interaction value last keyup interactionId .

      Note: 229

   3. If newInteractionId is a special case since it corresponds to IME keyboard events. Sometimes multiple of these are sent by the user agent, and they do not correspond to holding a key down repeatedly. null:

      1. Add previousKeyDownEntry to Set relevantGlobal window ’s entries last keydown interactionId to be queued . 0.

      2. Set pendingKeyDowns [ code window ] ’s last keyup interactionId to timingEntry . 0.

   4. Otherwise: Else:

      1. Append Set timingEntry newInteractionId to the result of getting the next interactionId given relevantGlobal ’s entries window .

   Note: For click events, it is expected that the keyCode represents "Enter" or "Space", and an implementation can enforce this constraint.

9. Return newInteractionId .

Note: During a composition session, keyboard and input events are still expected to be queued dispatched according to the UI Events section on keyboard events during composition . These events are assigned an interactionId corresponding to the active keyboard interaction, whereas the composition events themselves (e.g., compositionstart , compositionupdate ) are not assigned an interactionId .

To Flush Event Timing entries for given a Document doc , run the following steps: :

1. Let window be doc ’s relevant global object .

2. Let While renderingTimestamp window be the current high resolution time . ’s pending Event Timing entries is not empty:

   1. For each Let timingEntry in be the first element of window ’s pending Event Timing entries to be queued : .

   2. Set event timing entry duration passing If timingEntry , window , and renderingTimestamp . ’s interactionId is null, break.

   3. If timingEntry window ’s duration has queued first-input attribute value is greater than or equal to 16, then queue false, and timingEntry . ’s interactionId is not 0, run the following steps:

      1. Set window ’s entries to be has queued first-input to an empty list. true.

      2. For each Let pendingPointerDownEntry firstInputEntry in the values from be a copy of window timingEntry .

      3. Set firstInputEntry ’s pending pointer downs : entry type to " first - input ".

      4. Set event timing entry duration queue passing pendingPointerDownEntry , window , and renderingTimestamp firstInputEntry .

   4. For each pendingKeyDownEntry in the values from If window timingEntry ’s pending key downs : Set event timing entry duration passing is greater than or equal to 16, then queue pendingKeyDownEntry , timingEntry .

   5. Remove the first element of window , and renderingTimestamp . ’s pending Event Timing entries .

To should add PerformanceEventTiming given a duration PerformanceEventTiming attribute value is nonzero, return. Let start be timingEntry entry ’s and an optional startTime PerformanceObserverInit attribute value. options :

1. Set If timingEntry entry ’s duration entryType attribute value equals to a DOMHighResTimeStamp resulting from " renderingTimestamp first - start , with granularity of 8ms or less. input ", return true.

2. Let name be Assert that timingEntry entry ’s name entryType attribute value. Perform the following steps to update the value equals " event counts: ".

3. Let eventCounts minDuration be window ’s eventCounts . Assert that eventCounts contains name . Set eventCounts [ name ] to eventCounts [ name ] + 1. computed as follows:

   1. If window options ’s has dispatched input event is false, and not present or if timingEntry options ’s interactionId durationThreshold is not 0, run the following steps: Let present, let firstInputEntry minDuration be a copy of timingEntry . 104.

   2. Set Otherwise, let firstInputEntry minDuration be the maximum between 16 and options ’s entryType durationThreshold to " first - input ". queue firstInputEntry . value.

4. Set If window entry ’s has dispatched input event duration attribute value is greater than or equal to minDuration , return true.

5. Otherwise, return false.

To generate a CSS selector given an EventTarget target , run the following steps:

1. If target is a Node , run the following steps:

   1. Let selector be a string with an initial value of target ’s nodeName .

   2. If target is an Element , run the following steps:

      1. If target has an `id` id attribute, set selector to the concatenation of « selector , "#", the value of the `id` attribute ».

      2. Otherwise, if target has a `src` src attribute, set selector to the concatenation of « selector , "[src=", the value of the `src` attribute, "]" ».

   3. Return selector .

2. Otherwise, return an empty string.