이벤트 타이밍 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 DOMString targetSelector;
    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 알고리즘을 해당 Document에 대해 실행한다.

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 은 이벤트 타이밍 확정 과정에서 보류 중으로 표시되며, 이후 후속 이벤트(예: interactionId 계산 시 갱신됩니다. keyup 및 pointerup 등).

4. window를 event의 관련 전역 객체로 둡니다.

5. pendingKeyDowns를 window의 보류 중인 키 누름으로 둡니다.

6. pointerMap을 window의 포인터 상호작용 값 맵으로 둡니다.

7. pendingPointerDowns를 window의 보류 중인 포인터 누름으로 둡니다.

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의 사용자 상호작용 값의 값으로 둡니다.

   7. entry의 interactionId를 interactionId로 설정합니다.

   8. entry를 window의 대기열에 추가할 항목에 추가합니다.

   9. pendingKeyDowns[code]를 제거합니다.

   10. interactionId를 반환합니다.

9. type이 compositionstart이면:

   1. pendingKeyDowns의 값에 있는 각 entry에 대해:

      1. entry를 window의 대기열에 추가할 항목에 추가합니다.

   2. pendingKeyDowns를 비웁니다.

   3. 0을 반환합니다.

10. type이 input이면:

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

    2. event의 isComposing 속성 값이 false이면 0을 반환합니다.

    3. window의 상호작용 횟수를 증가시킵니다.

    4. window의 사용자 상호작용 값을 반환합니다.

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의 사용자 상호작용 값을 반환합니다.

       2. type이 pointerup이고 window의 컨텍스트 메뉴가 트리거되었는지를 나타내는 플래그가 true이면:

          1. window의 컨텍스트 메뉴가 트리거되었는지 나타내는 플래그를 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의 컨텍스트 메뉴가 트리거되었는지를 나타내는 값을 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를 반환한다.

finalize event timing을 요청받았을 때, 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. timingEntry의 targetSelector 값을 target을 입력값으로 하여 CSS 선택자 생성 알고리즘을 실행한 결과로 설정한다.

8. event의 type 속성 값이 pointerdown이면:

   1. pendingPointerDowns를 relevantGlobal의 대기 중인 pointerdown들로 설정한다.

   2. pointerId를 event의 pointerId로 설정한다.

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

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

      2. previousPointerDownEntry를 relevantGlobal의 대기시킬 entries에 추가한다.

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

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

9. 그 외에, event의 type 속성 값이 keydown이라면:

   1. event의 isComposing 속성 값이 true이면:

      1. timingEntry를 relevantGlobal의 대기시킬 entries에 추가한다.

      2. 반환한다.

   2. pendingKeyDowns를 relevantGlobal의 대기 중인 keydown들로 설정한다.

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

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

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

      2. code가 229가 아니라면:

         1. relevantGlobal의 user interaction value 값을 UA가 선택한 작은 값만큼 증가시킨다.

         2. previousKeyDownEntry의 interactionId 값을 relevantGlobal의 user interaction value로 설정한다.

         참고: 229는 IME 키보드 이벤트에 해당하는 특수 케이스다. 때때로 사용자 에이전트가 이 이벤트를 여러 번 전송하는데, 이는 키를 반복해서 누르는 상황과는 다르다.

      3. previousKeyDownEntry를 relevantGlobal의 대기시킬 entries에 추가한다.

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

10. 그 외의 경우:

    1. timingEntry를 relevantGlobal의 대기시킬 entries에 추가한다.

대기 중인 이벤트 타이밍 엔트리 디스패치를 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의 대기할 entry 목록을 빈 리스트로 설정한다.

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로 설정한다.

CSS 선택자 생성을 EventTarget target에 대해 실행하려면, 다음 단계를 따른다:

1. target이 Node인 경우, 다음 단계를 실행한다:

   1. selector를 target의 nodeName의 초기값으로 하는 문자열로 설정한다.

   2. target이 Element인 경우, 다음 단계를 실행한다:

      1. target이 `id` 속성을 가지고 있으면, selector를 « selector, "#", `id` 속성 값 »을 연결한 값으로 설정한다.

      2. 그 외에 target이 `src` 속성을 가지고 있으면, selector를 « selector, "[src=", `src` 속성 값, "]" »을 연결한 값으로 설정한다.

   3. selector를 반환한다.

2. 그 외의 경우, 빈 문자열을 반환한다.