이벤트 타이밍 API

event가 이벤트 타이밍 대상인지 판단하려면 다음 단계를 실행합니다:

1. event의 isTrusted 속성이 false로 설정되어 있으면 false를 반환한다.

2. 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를 반환한다.

3. 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 unsigned long long interactionId;
    [Default] object toJSON();
};

1. this의 eventTarget이 null로 주어졌을 때 페인트 타이밍에 대해 노출되지 않는 경우, null을 반환한다.

2. this의 eventTarget을 반환한다.

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

이벤트 디스패치 알고리즘을 다음과 같이 수정합니다.

1단계 바로 뒤에 다음 단계를 추가합니다:

1. interactionId를 compute-interactionId 알고리즘을 event로 실행한 결과로 한다.

2. timingEntry를 initialize-event-timing 알고리즘을 event, 현재 고해상도 시각, interactionId로 실행한 결과로 한다.

해당 알고리즘의 반환 단계 바로 앞에 다음 단계를 추가합니다:

1. finalize-event-timing 알고리즘을 timingEntry, event, target, 현재 고해상도 시각을 인자로 실행한다.

update-the-rendering 단계에서 이벤트 루프 처리 모델 내 mark-paint-timing 호출 단계 바로 뒤에 다음 단계를 추가합니다:

1. 각 완전히 활성화된 Document 에 대해 docs에서 dispatch-pending-event-timing-entries 알고리즘을 실행한다.

partial dictionary PerformanceObserverInit {
    DOMHighResTimeStamp durationThreshold;
};

PerformanceEventTiming entry와 PerformanceObserverInit options가 주어졌을 때, PerformanceEventTiming 추가 여부를 결정하려면 entry 및 필요에 따라 options를 인자로 다음 단계를 실행한다:

1. entry의 entryType 속성 값이 "first-input"이면 true를 반환한다.

2. entry의 entryType 속성 값이 "event"임을 단언한다.

3. minDuration을 다음과 같이 계산한다:

   1. options가 없거나 options의 durationThreshold 가 없으면 minDuration을 104로 한다.

   2. 그 외에는 minDuration을 16과 options의 durationThreshold 값 중 큰 값으로 한다.

4. entry의 duration 값이 minDuration 이상이면 true를 반환한다.

5. 그렇지 않으면 false를 반환한다.

Window window 객체에 대해 상호작용 수 증가를 요청받으면 다음 단계를 수행한다:

1. window의 user interaction value 값을 사용자 에이전트가 선택한 작은 값만큼 증가시킨다.

2. interactionCount를 window의 interactionCount 값으로 한다.

3. interactionCount를 interactionCount + 1로 설정한다.

event를 입력값으로 interactionId 계산을 요청받으면 다음 단계를 실행한다:

1. event의 isTrusted 속성이 false이면 0을 반환한다.

2. type을 event의 type 속성값으로 한다.

3. type이 keyup, compositionstart, input, pointercancel, pointerup, click, contextmenu 중 하나가 아니라면 0을 반환한다.

   참고: keydown 과 pointerdown 은 finalize event timing 단계에서 pending으로 처리되며, 이후 interactionId 계산 알고리즘에서 처리된다 (keyup, pointerup 등).

4. window를 event의 관련 글로벌 객체로 한다.

5. pendingKeyDowns를 window의 pending key downs로 한다.

6. pointerMap을 window의 pointer interaction value map으로 한다.

7. pendingPointerDowns를 window의 pending pointer downs로 한다.

8. type이 keyup인 경우:

   1. event의 isComposing 값이 true이면 0을 반환한다.

   2. code를 event의 keyCode 값으로 한다.

   3. pendingKeyDowns[code]가 없으면 0을 반환한다.

   4. entry를 pendingKeyDowns[code]로 한다.

   5. 상호작용 수 증가를 window에 대해 실행한다.

   6. interactionId를 window의 user interaction value 값으로 한다.

   7. entry의 interactionId 를 interactionId로 설정한다.

   8. entry를 window의 entries to be queued에 추가한다.

   9. Remove pendingKeyDowns[code]을 실행한다.

   10. interactionId를 반환한다.

9. type이 compositionstart인 경우:

   1. pendingKeyDowns의 값들에 대해 각 entry마다:

      1. entry를 window의 entries to be queued에 추가한다.

   2. Clear pendingKeyDowns를 실행한다.

   3. 0을 반환한다.

10. type이 input인 경우:

    1. event가 InputEvent 인스턴스가 아니면 0을 반환한다. 참고: 이 검사는 Event 중 input 타입이지만 실제 텍스트 변경과 관련 없는 이벤트를 제외하기 위한 것이다.

    2. event의 isComposing 값이 false이면 0을 반환한다.

    3. 상호작용 수 증가를 window에 대해 실행한다.

    4. window의 user interaction value 값을 반환한다.

11. 그 외 (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. 상호작용 수 증가를 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] 값을 반환한다.

이벤트 타이밍 초기화를 event, processingStart, interactionId로 요청받으면 다음 단계를 실행한다:

1. event가 이벤트 타이밍 대상이 아니라면 null을 반환한다.

2. timingEntry를 event의 관련 realm에서 새 PerformanceEventTiming 객체로 생성한다.

3. timingEntry의 name 을 event의 type 값으로 설정한다.

4. timingEntry의 entryType 을 "event"로 설정한다.

5. timingEntry의 startTime 을 event의 timeStamp 값으로 설정한다.

6. timingEntry의 processingStart 를 processingStart로 설정한다.

7. timingEntry의 cancelable 을 event의 cancelable 값으로 설정한다.

8. timingEntry의 interactionId 를 interactionId로 설정한다.

9. timingEntry를 반환한다.

이벤트 타이밍 종료를 timingEntry, event, target, processingEnd로 요청받으면 다음 단계를 실행한다:

1. timingEntry가 null이면 반환한다.

2. relevantGlobal을 target의 관련 글로벌 객체로 한다.

3. relevantGlobal이 Window를 구현하지 않으면 반환한다.

4. timingEntry의 processingEnd를 processingEnd로 설정한다.

5. target이 Node를 구현함을 단언한다.

   참고: 이 단언은 Event Timing API가 지원하는 이벤트 타입 때문에 항상 성립한다.

6. timingEntry의 연결된 eventTarget을 target으로 설정한다.

   참고: 마지막 이벤트 타겟으로 설정된다. eventTarget은 재타겟팅이 발생하면 루트에 가장 가까운, 마지막 타겟이 사용된다.

7. event의 type 값이 pointerdown인 경우:

   1. pendingPointerDowns를 relevantGlobal의 pending pointer downs로 한다.

   2. pointerId를 event의 pointerId로 한다.

   3. pendingPointerDowns[pointerId]가 존재하면:

      1. previousPointerDownEntry를 pendingPointerDowns[pointerId]로 한다.

      2. previousPointerDownEntry를 relevantGlobal의 entries to be queued에 추가한다.

   4. pendingPointerDowns[pointerId]를 timingEntry로 설정한다.

   5. window의 is contextmenu triggered를 false로 설정한다.

8. 그 외, event의 type 값이 keydown인 경우:

   1. event의 isComposing 값이 true라면:

      1. timingEntry를 relevantGlobal의 entries to be queued에 추가한다.

      2. 반환한다.

   2. pendingKeyDowns를 relevantGlobal의 pending key downs로 한다.

   3. code를 event의 keyCode 값으로 한다.

   4. pendingKeyDowns[code]가 존재하면:

      1. previousKeyDownEntry를 pendingKeyDowns[code]로 한다.

      2. code가 229가 아니면:

         1. window의 user interaction value 값을 사용자 에이전트가 선택한 작은 값만큼 증가시킨다.

         2. previousKeyDownEntry의 interactionId를 window의 user interaction value로 설정한다.

         참고: 229는 IME 키보드 이벤트로, 사용자 에이전트가 여러 개의 이벤트를 보낼 수 있으며 이는 키를 반복적으로 누르는 것과는 다르다.

      3. previousKeyDownEntry를 window의 entries to be queued에 추가한다.

   5. pendingKeyDowns[code]를 timingEntry로 설정한다.

9. 그 외:

   1. timingEntry를 relevantGlobal의 entries to be queued에 추가한다.

대기 중인 이벤트 타이밍 엔트리 디스패치를 Document doc에 대해 요청받으면 다음 단계를 실행한다:

1. window를 doc의 관련 글로벌 객체로 한다.

2. renderingTimestamp를 현재 고해상도 시각으로 한다.

3. window의 entries to be queued의 각 timingEntry에 대해:

   1. 이벤트 타이밍 엔트리 duration 설정을 timingEntry, window, renderingTimestamp로 실행한다.

   2. timingEntry의 duration 값이 16 이상이면 queue timingEntry를 실행한다.

4. window의 entries to be queued를 비운다.

5. window의 pending pointer downs의 값들에 대해 각 pendingPointerDownEntry마다:

   1. 이벤트 타이밍 엔트리 duration 설정을 pendingPointerDownEntry, window, renderingTimestamp로 실행한다.

6. window의 pending key downs의 값들에 대해 각 pendingKeyDownEntry마다:

   1. 이벤트 타이밍 엔트리 duration 설정을 pendingKeyDownEntry, window, renderingTimestamp로 실행한다.

이벤트 타이밍 엔트리 duration 설정을 PerformanceEventTiming timingEntry, Window window, DOMHighResTimeStamp renderingTimestamp로 요청받으면 다음 단계를 실행한다:

1. timingEntry의 duration 값이 0이 아니면 반환한다.

2. start를 timingEntry의 startTime 값으로 한다.

3. timingEntry의 duration 을 DOMHighResTimeStamp 타입의 renderingTimestamp - start 계산 결과(정밀도 8ms 이하)로 설정한다.

4. name을 timingEntry의 name 값으로 한다.

5. 이벤트 카운트 업데이트를 위해 다음 단계를 실행한다:

   1. eventCounts를 window의 eventCounts로 한다.

   2. eventCounts가 name을 포함함을 단언한다.

   3. Set eventCounts[name]를 eventCounts[name] + 1로 설정한다.

6. window의 has dispatched input event가 false이고 timingEntry의 interactionId 가 0이 아니면 다음 단계를 실행한다:

   1. firstInputEntry를 timingEntry의 복사본으로 한다.

   2. firstInputEntry의 entryType 을 "first-input"로 설정한다.

   3. queue firstInputEntry를 실행한다.

   4. window의 has dispatched input event를 true로 설정한다.