소프트 탐색 및 상호작용 콘텐츠풀 페인트

초안 커뮤니티 그룹 보고서,

이 버전:
https://wicg.github.io/soft-navigations/
테스트 스위트:
https://github.com/web-platform-tests/wpt/tree/master/soft-navigation-heuristics
이슈 추적:
GitHub
편집자:
(Google)
(Google)
전 편집자:
(Shopify)

Copyright © 2026 the Contributors to the Soft Navigations and Interaction Contentful Paint Specification, published by the Web Platform Incubator Community Group under the W3C Community Contributor License Agreement (CLA). A human-readable summary is available.

초록

이 문서는 상호작용으로 시작된 효과를 측정하기 위한 메커니즘을 정의하여, 사용자 에이전트가 페이지 수정과 성능 엔트리를 그것들을 유발한 사용자 상호작용으로 다시 귀속할 수 있게 한다.

이 문서의 상태

이 명세는 Web Platform Incubator Community Group에 의해 공개되었다. 이는 W3C 표준이 아니며 W3C 표준화 경로에 있는 것도 아니다. 다음에 유의하라. W3C Community Contributor License Agreement (CLA) 에 따라 제한적인 옵트아웃 및 기타 조건이 적용된다. 자세한 내용은 W3C Community and Business Groups를 참조하라.

1. 소개

이 절은 비규범적이다.

현대 웹 애플리케이션은 전체 페이지 탐색을 수행하지 않고도 사용자 상호작용에 응답하여 콘텐츠를 동적으로 업데이트하는 경우가 많다. 구조적 DOM 수정, 콘텐츠풀 페인트, 히스토리 상태 변경과 같은 이러한 상호작용으로 시작된 효과들은 역사적으로 측정하기 어렵고 올바른 사용자 동작에 귀속하기 어려웠다.

전형적인 단일 페이지 애플리케이션 패턴을 생각해 보자. 사용자가 제품 링크를 클릭하면 click 이벤트 핸들러가 트리거된다. 이 핸들러는 제품 세부 정보를 위한 네트워크 fetch()를 시작한다. 응답이 도착하면 콜백이 실행되어 새 콘텐츠를 DOM에 동적으로 삽입하고 History 또는 Navigation API를 사용해 URL을 업데이트한다. 사용자에게는 이것이 탐색처럼 보이지만, Largest Contentful Paint (LCP) ([LARGEST-CONTENTFUL-PAINT]) 같은 기존 메트릭은 초기 페이지 로드만 측정하고 Interaction to Next Paint (INP)는 클릭 자체의 즉각적인 시각적 피드백만 측정하므로, 그 뒤의 중요한 렌더링과 "소프트" 탐색은 포착되지 않는다.

이 명세는 [EVENT-TIMING] API를 활용하여 상호작용을 정의하고, [ASYNC-CONTEXT] 제안을 활용하여 비동기 작업 경계를 가로지르는 인과관계를 추적한다. 또한 [PAINT-TIMING] 및 [LARGEST-CONTENTFUL-PAINT]와 통합하여 렌더링 변경을 성능 타임라인에 귀속함으로써, 브라우저가 "소프트 탐색"을 포함한 이러한 효과들을 식별하고 보고하는 방법을 정의한다.

또한 이 명세는 [CONTAINER-TIMING] 제안과 통합된다. 사용자 상호작용이 DOM 수정을 일으키면, 수정된 노드들은 새로운 "컨테이너 루트"로 지정된다. 이후 해당 서브트리 안에서 발생하는 모든 콘텐츠풀 페인트는 각각의 루트에 귀속되고, 그 루트는 다시 원래의 상호작용으로 추적된다. 이를 통해 초기 이벤트 디스패치보다 훨씬 뒤에 발생하는 풍부하고 동적인 페이지 업데이트를 효율적이고 정확하게 측정할 수 있다.

2. 상호작용 인프라

2.1. 탐색 ID

탐색 id는 전역 객체의 수명 동안 각 탐색(하드 및 소프트 모두)에 할당되는 고유 식별자이다.

각 전역 객체는 현재 탐색 id를 가지며, 이는 unsigned long long이고, 처음에는 Document의 초기 interactionId 값 및 Navigation Timing의 초기 navigationId를 초기화하는 값과 같은 값으로 설정된다.

2.2. 상호작용 컨텍스트 소개

소프트 탐색 감지는 작업의 인과관계를 추적하고, 특정 연산(예: DOM 노드 append)이 특정 사용자 상호작용에 의해 트리거되었음을 관찰할 수 있는 능력에 의존한다.

이 명세는 이러한 전파를 처리하기 위해 TC39 [ASYNC-CONTEXT] 제안을 활용한다. 모든 새 사용자 상호작용(Event Timing에서 정의됨) 또는 관련 탐색 이벤트는 새로운 InteractionContext를 만든다. 이 컨텍스트는 숨겨진 내부 전용 AsyncContext.Variable([[ActiveInteractionContext]]로 표시됨)에 저장된다.

웹 플랫폼과 AsyncContext의 통합은 이 변수가 비동기 continuation(예: setTimeout, fetch, await)에 자동으로 연결되도록 하여, 브라우저가 나중에 발생한 효과를 원래 상호작용에 귀속할 수 있게 한다.

스크립트 전파에 더해, 이 명세는 DOM을 수정하는 사용자 상호작용이 ([CONTAINER-TIMING]을 통해) 컨테이너 루트를 설정하는 방법을 정의한다. 이러한 루트는 현재 활성인 비동기 스크립트가 없더라도, 콘텐츠풀 페인트와 같은 이후의 렌더링 효과가 시작한 상호작용 컨텍스트로 추적될 수 있게 한다.

2.3. InteractionContext 구조체

InteractionContext는 단일 상호작용으로부터 소프트 탐색을 감지하는 데 필요한 데이터를 유지하기 위해 사용되는 구조체이다. 다음 항목들을 가진다:
이 명세의 향후 버전은 탐색의 더 완전한 히스토리를 제공하기 위해 상호작용 컨텍스트 중 발생하는 모든 URL 업데이트를 추적할 수 있다. 마지막 URL 값은 현재 SoftNavigationEntry의 name에는 첫 번째 URL 값만 노출되더라도, 효과를 상호작용의 최종 상태로 정확히 다시 귀속하기 위해 내부적으로 추적된다.
총 페인트된 영역의 개념은 [CONTAINER-TIMING] 통합의 일부로 정교화될 것으로 예상되며, 특정 업데이트 영역을 추적하는 방향으로 이동할 수 있다.

2.4. 인프라 알고리즘

현재 상호작용 컨텍스트를 가져오기 위해, 다음 단계를 실행한다:

  1. context를 내부 AsyncContext.Variable [[ActiveInteractionContext]]의 값으로 둔다.

  2. context를 반환한다.

Document document, interaction id, 그리고 Event event가 주어졌을 때, 상호작용에 대한 컨텍스트를 가져오거나 만들기 위해 다음 단계를 실행한다:

  1. document의 상호작용 id에서 상호작용 컨텍스트로[interaction id]가 존재하면, document의 상호작용 id에서 상호작용 컨텍스트로[interaction id]를 반환한다.

  2. interaction context를 새 InteractionContext로 둔다.

  3. interaction context의 id를 interaction id로 설정한다.

  4. interaction context의 시작 시간을 event의 startTime으로 설정한다.

  5. document의 상호작용 id에서 상호작용 컨텍스트로[interaction id]를 interaction context로 설정한다.

  6. interaction context를 반환한다.

Document document와 Event event가 주어졌을 때, 이벤트에 대한 상호작용 컨텍스트를 업데이트하기 위해 다음 단계를 실행한다:

  1. timestamp를 document의 관련 전역 객체가 주어졌을 때의 현재 고해상도 시간으로 둔다.

  2. is scroll을 event의 타입이 "scroll"이면 true, 그렇지 않으면 false로 둔다.

  3. is input을 event의 타입이 (has dispatched input event를 트리거하는) 이벤트 타입이면 true, 그렇지 않으면 false로 둔다([EVENT-TIMING]에서 정의됨).

  4. is scroll이 false이고 is input이 false이면 반환한다.

  5. document의 상호작용 id에서 상호작용 컨텍스트로의 값들 각각의 interaction context에 대해:

    1. is scroll이 true이고 interaction context의 첫 번째 스크롤 타임스탬프가 설정되지 않은 경우:

      1. interaction context의 첫 번째 스크롤 타임스탬프를 timestamp로 설정한다.

    2. is input이 true이고 interaction context의 첫 번째 입력 타임스탬프가 설정되지 않은 경우:

      1. interaction context의 첫 번째 입력 타임스탬프를 timestamp로 설정한다.

Document document, interaction id, 그리고 Event event가 주어졌을 때, 상호작용 이벤트 처리 시작을 위해 다음 단계를 실행한다:

  1. interaction id가 null이면 null을 반환한다.

  2. interaction context를 document, interaction id, 그리고 event로 상호작용에 대한 컨텍스트를 가져오거나 만들기를 호출한 결과로 둔다.

  3. 내부 AsyncContext.Variable [[ActiveInteractionContext]]의 값을 interaction context로 설정한다.

  4. interaction context를 반환한다.

null 또는 InteractionContext interaction context가 주어졌을 때, 상호작용 이벤트 타이밍 처리 종료를 위해 다음 단계를 실행한다:

  1. interaction context가 null이면 반환한다.

  2. 내부 AsyncContext.Variable [[ActiveInteractionContext]]의 값을 null로 설정한다.

3. 상호작용 콘텐츠풀 페인트

3.1. InteractionContentfulPaint 인터페이스

[Exposed=Window]
interface InteractionContentfulPaint : PerformanceEntry {
    readonly attribute DOMHighResTimeStamp renderTime;
    readonly attribute DOMHighResTimeStamp loadTime;
    readonly attribute unsigned long long size;
    readonly attribute DOMString id;
    readonly attribute DOMString url;
    readonly attribute Element? element;
    readonly attribute unsigned long long interactionId;

    object toJSON();
};

InteractionContentfulPaint includes PaintTimingMixin;

각 InteractionContentfulPaint는 관련된 페인트 타이밍 정보를 가진다.

현재 이는 Largest Contentful Paint (LCP) 성능 엔트리를 본떠 모델링되어 있지만, 향후 방향은 Container Timing 성능 엔트리를 본떠 모델링하는 것이다.
renderTime 속성의 getter는 this의 관련 페인트 타이밍 정보의 렌더링 업데이트 종료 시간을 반환해야 한다.

loadTime 속성의 getter는 this의 관련 페인트 타이밍 정보의 구현 정의 표시 시간을 반환해야 한다.

size 속성의 getter는 콘텐츠풀 페인트의 크기를 반환해야 한다.

id 속성의 getter는 콘텐츠풀 페인트의 ID를 반환해야 한다.

url 속성의 getter는 콘텐츠풀 페인트의 URL을 반환해야 한다.

element 속성의 getter는 콘텐츠풀 페인트와 관련된 Element를 반환해야 하며, 그 요소가 문서에서 제거된 경우 null을 반환해야 한다.

interactionId 속성의 getter는 이 페인트를 트리거한 상호작용의 상호작용 id를 반환해야 한다.

3.2. 상호작용 콘텐츠풀 페인트 알고리즘

전역 객체 global, InteractionContext interaction context, 그리고 Element element로 상호작용 콘텐츠풀 페인트 엔트리를 만들기 위해 다음 단계를 실행한다:

  1. entry를 global의 realm 안의 새 InteractionContentfulPaint 객체로 둔다.

  2. entry의 entryType을 "interaction-contentful-paint"로 설정한다.

  3. entry의 element를 element로 설정한다.

  4. entry의 interactionId를 interaction context의 id로 설정한다.

  5. entry의 관련 페인트 타이밍 정보를 새 페인트 타이밍 정보로 설정한다.

  6. entry의 renderTime, loadTime, size, id, 및 url을 report largest contentful paint 알고리즘에서 정의된 콘텐츠풀 페인트 후보의 대응하는 값으로 설정한다([LARGEST-CONTENTFUL-PAINT]).

  7. entry의 startTime을 interaction context의 시작 시간으로 설정한다.

  8. entry의 duration을 entry의 renderTime과 entry의 startTime의 차이로 설정한다.

  9. entry를 반환한다.

Element element, Document document, 그리고 InteractionContext interaction context가 주어졌을 때, 상호작용 콘텐츠풀 페인트 엔트리를 방출하기 위해 다음 단계를 실행한다:

  1. global을 document의 관련 전역 객체로 둔다.

  2. paint entry를 global, interaction context, 그리고 element로 상호작용 콘텐츠풀 페인트 엔트리를 만들기를 호출한 결과로 둔다. 참고: 리소스 로딩이 필요한 요소(예: 새 src가 있는 이미지)의 경우, [PAINT-TIMING] 명세는 콘텐츠풀 페인트 감지를 트리거하여 결국 이 알고리즘을 호출하기 전에 "is loaded" 기준이 충족되도록 보장할 책임이 있다.

  3. interaction context의 첫 번째 스크롤 타임스탬프가 설정되어 있고 paint entry의 renderTime이 interaction context의 첫 번째 스크롤 타임스탬프보다 크면, 반환한다.

  4. interaction context의 첫 번째 입력 타임스탬프가 설정되어 있고 paint entry의 renderTime이 interaction context의 첫 번째 입력 타임스탬프보다 크면, 반환한다.

  5. paint entry를 큐에 넣는다.

  6. paint entry를 global의 성능 엔트리 버퍼에 추가한다.

  7. interaction context의 첫 번째 콘텐츠풀 페인트가 null이면:

    1. interaction context의 첫 번째 콘텐츠풀 페인트를 paint entry로 설정한다.

  8. interaction context의 최대 콘텐츠풀 페인트를 paint entry로 설정한다.

  9. interaction context의 총 페인트된 영역을 paint entry의 size만큼 증가시킨다.

참고: InteractionContentfulPaint 엔트리는 감지되는 즉시 성능 타임라인에 방출되며, 그 상호작용이 결국 소프트 탐색으로 이어지는지와는 독립적이다. 이를 통해 개발자는 모든 상호작용의 렌더링 업데이트를 모니터링할 수 있다.

4. 소프트 탐색

4.1. SoftNavigationEntry 인터페이스

[Exposed=Window]
interface SoftNavigationEntry : PerformanceEntry {
    readonly attribute DOMString navigationType;
    readonly attribute unsigned long long interactionId;
    readonly attribute InteractionContentfulPaint? largestInteractionContentfulPaint;
};

SoftNavigationEntry includes PaintTimingMixin;

각 SoftNavigationEntry는 관련된 페인트 타이밍 정보를 가진다.

navigationType 속성의 getter는 소프트 탐색을 트리거한 상호작용의 탐색 타입을 반환해야 한다.

interactionId 속성의 getter는 소프트 탐색을 트리거한 상호작용의 상호작용 id를 반환해야 한다.

largestInteractionContentfulPaint 속성의 getter는 상호작용의 결과로 발생한 최대 콘텐츠풀 페인트를 나타내는 InteractionContentfulPaint 엔트리를 반환해야 하며, 그러한 페인트가 발생하지 않은 경우 null을 반환해야 한다.

name 속성의 getter는 소프트 탐색을 트리거한 상호작용의 첫 번째 URL 값을 반환해야 한다.

startTime 속성의 getter는 소프트 탐색을 트리거한 상호작용의 시작 시간을 반환해야 한다.

duration 속성의 getter는 방출 시점의 this의 presentationTime과 this의 startTime의 차이를 반환해야 한다.

실제로 largestInteractionContentfulPaint는 null이 아닐 것으로 예상된다. 확인된 소프트 탐색은 방출을 트리거하기 위해 적어도 하나의 감지된 상호작용 콘텐츠풀 페인트를 필요로 하기 때문이다.

그러나 향후 반복에서는 첫 번째 페인트 이전에 URL 수정 즉시 소프트 탐색을 커밋된 것으로 간주할 수 있는지 평가할 수 있다. 이러한 모델에서는 이 필드가 방출 시점에 null일 수 있다.

이 타이밍의 주요 설계 고려사항은 URL 수정과 첫 번째 페인트 사이의 간격에 발생하는 다른 타임라인 엔트리(예: LayoutShift, PerformanceResourceTiming, LongAnimationFrameTiming 등)의 귀속이다. 예를 들어 많은 사이트는 현재 페이지가 아직 이전 탐색 상태에 남아 있는 동안에도 fetch 요청을 시작하자마자 새 URL을 커밋한다. 일관된 타임라인 슬라이싱을 보장하기 위해, 이 명세는 첫 번째 페인트가 전환을 확인하기 전까지 이러한 모든 엔트리를 이전 탐색 식별자에 귀속한다.

4.2. 소프트 탐색 알고리즘

소프트 탐색은 다음 조건을 만족하는 동일 문서 탐색이다:

Document document와 InteractionContext interaction context가 주어졌을 때, 소프트 탐색 방출을 평가하기 위해 다음 단계를 실행한다:

  1. interaction context의 emitted가 true이면 반환한다.

  2. document의 활성 소프트 탐색 후보가 interaction context가 아니면 반환한다.

  3. interaction context의 첫 번째 URL 값이 설정되지 않았으면 반환한다.

  4. interaction context의 첫 번째 콘텐츠풀 페인트가 null이면 반환한다.

  5. global을 document의 관련 전역 객체로 둔다.

  6. url을 interaction context의 첫 번째 URL 값으로 둔다.

  7. entry를 global, interaction context, url, 그리고 interaction context의 시작 시간으로 소프트 탐색 엔트리를 만들기를 호출한 결과로 둔다.

  8. global과 entry로 소프트 탐색 엔트리를 방출하기를 호출한다.

  9. interaction context의 emitted를 true로 설정한다.

전역 객체 global, InteractionContext interaction context, 문자열 url, 그리고 DOMHighResTimeStamp start time으로 소프트 탐색 엔트리를 만들기 위해 다음 단계를 실행한다:

  1. entry를 global의 realm 안의 새 SoftNavigationEntry 객체로 둔다.

  2. entry의 name을 url로 설정한다.

  3. entry의 entryType을 "soft-navigation"으로 설정한다.

  4. entry의 startTime을 start time으로 설정한다.

  5. first paint를 interaction context의 첫 번째 콘텐츠풀 페인트로 둔다.

  6. first paint가 null이 아니면:

    1. entry의 관련 페인트 타이밍 정보를 first paint의 관련 페인트 타이밍 정보로 설정한다.

  7. entry의 interactionId를 interaction context의 id(사용 가능한 경우)로 설정한다.

  8. entry의 largestInteractionContentfulPaint를 interaction context의 최대 콘텐츠풀 페인트로 설정한다.

  9. entry를 반환한다.

참고: navigationId는 아래에서 PerformanceEntry를 큐에 넣기에서 설정된다.
전역 객체 global과 SoftNavigationEntry entry로 소프트 탐색 엔트리를 방출하기 위해 다음 단계를 실행한다:

  1. entry의 탐색 id를 entry의 interactionId로 설정한다.

  2. global의 현재 탐색 id를 entry의 interactionId로 설정한다.

  3. entry를 큐에 넣는다.

  4. entry를 global의 성능 엔트리 버퍼에 추가한다.

Document document, 문자열 url, 그리고 문자열 navigation type으로, 동일 문서 커밋을 처리하기 위해 다음 단계를 실행한다:

  1. interaction context를 현재 상호작용 컨텍스트를 가져오기를 호출한 결과로 둔다.

  2. interaction context가 null이면 반환한다.

  3. interaction context의 마지막 URL 값을 url로 설정한다.

  4. interaction context의 첫 번째 URL 업데이트 타임스탬프가 설정되지 않은 경우:

    1. interaction context의 첫 번째 URL 업데이트 타임스탬프를 document의 관련 전역 객체가 주어졌을 때의 현재 고해상도 시간으로 설정한다.

    2. interaction context의 첫 번째 URL 값을 url로 설정한다.

    3. interaction context의 탐색 타입을 navigation type으로 설정한다.

  5. document의 활성 소프트 탐색 후보를 interaction context로 설정한다.

  6. document와 interaction context로 소프트 탐색 방출을 평가하기를 호출한다.

5. PerformanceEntry 확장

[Exposed=(Window,Worker)]
partial interface PerformanceEntry {
    readonly attribute unsigned long long navigationId;
};
각 PerformanceEntry는 관련된 탐색 id를 가지며, 이는 unsigned long long이고, 처음에는 0이다.

navigationId 속성의 getter는 this의 탐색 id를 반환해야 한다.

6. 명세 통합

6.1. HTML 통합

6.1.1. Document

각 문서는 상호작용 id에서 상호작용 컨텍스트로를 가지며, 이는 맵이고, 처음에는 비어 있다.

각 문서는 활성 소프트 탐색 후보를 가지며, 이는 InteractionContext 또는 null이고, 처음에는 null이다.

6.1.2. History

히스토리 단계 적용을 위해 문서 업데이트에서, 5.5.1 이전(documentsEntryChanged가 true이고 documentIsNew가 false인 경우), 동일 문서 커밋을 처리하기를 Document, entry의 url, 그리고 "traverse"로 호출한다.
([HTML]에서 정의된) 공유 history push/replace 단계에서, URL이 업데이트된 뒤, 동일 문서 커밋을 처리하기를 Document, 새 URL, 그리고 연산 타입("push" 또는 "replace" 중 하나)으로 호출한다.

6.1.3. Node

각 노드는 관련 상호작용 컨텍스트를 가지며, 처음에는 null이다.

6.1.4. 하드 탐색

새 전역 객체 global이 생성될 때(예: "하드" 탐색 중), 그 현재 탐색 id는 § 2.1 탐색 ID에 명시된 대로 초기화된다.

[NAVIGATION-TIMING]에서, 초기 탐색을 위한 PerformanceNavigationTiming 엔트리를 만들 때, 사용자 에이전트는 그 navigationId를 전역 객체의 현재 탐색 id로 설정해야 한다.

6.2. Event Timing 통합

이 명세는 [EVENT-TIMING]의 상호작용 정의를 확장하여 현대 웹 애플리케이션 및 단일 페이지 애플리케이션에 관련된 추가 이벤트 타입을 포함한다.

다음 이벤트 타입은 ([EVENT-TIMING]에서 정의된) 상호작용의 일부로 간주된다:

이러한 이벤트가 사용자 상호작용의 결과로 디스패치될 때, 사용자 에이전트는 문서의 관련 전역 객체에 대해 다음 interactionId 가져오기 단계를 실행하여 얻은 고유 상호작용 id를 이들에게 할당해야 한다. 이벤트가 이미 할당된 상호작용 id를 가진 이전 상호작용에 의해 트리거된 경우, 사용자 에이전트는 같은 식별자를 재사용해야 한다.

이러한 이벤트는 사용자 동작에서 시작된 이벤트일 때만 기본 상호작용으로 보고된다(예: 브라우저 UI의 뒤로 버튼 클릭). 대부분의 다른 시나리오—예컨대 click 핸들러가 history를 수동으로 조작하는 경우—에서는 이어지는 popstate 또는 navigate 이벤트가 독립적인 사용자 상호작용으로 간주되지 않는다.

이러한 프로그래밍 방식으로 트리거된 이벤트는 isTrusted 플래그가 설정되지 않을 수 있지만, history 및 navigation API가 시작 작업의 비동기 continuation으로 처리되기 때문에 [ASYNC-CONTEXT]를 통해 원래 상호작용에 올바르게 귀속된다.

참고: navigate, popstate, 그리고 hashchange 이벤트는 소프트 탐색 추적 및 interactionId 할당을 위한 내부 신호로 사용된다. 이 명세는 이러한 이벤트 타입을 PerformanceEventTiming 엔트리로 성능 타임라인에 노출할 것을 요구하지 않으며, 그 결정은 [EVENT-TIMING] 명세에 맡긴다.
[EVENT-TIMING] 명세는 processingStart와 processingEnd 훅을 명시적으로 정의하고, interactionId 할당이 이 통합에 충분히 이른 시점에 발생하도록 업데이트될 것으로 예상된다. 현재 interactionId 할당은 일반적으로 이벤트 처리 종료 시점까지 지연된다.
TODO/버그 수정: 이 명세는 안전한 전역 카운터를 보장하기 위해 interactionId에 unsigned long long을 사용하지만, [EVENT-TIMING]은 현재 이를 unsigned long으로 정의한다. 이 불일치는 두 명세의 향후 버전에서 해결될 것으로 예상된다.
Window window에 대해 다음 interactionId 가져오기:

  1. window의 interaction count를 window의 interaction count에 1을 더한 값으로 설정한다.

  2. window의 초기 interactionId 값에 (window의 interaction count 곱하기 window의 interactionId increment)를 더한 값을 반환한다.

([EVENT-TIMING]에서 정의된) processingStart에서, Document document와 Event event가 주어졌을 때, 다음 단계를 추가한다:

  1. document와 event로 이벤트에 대한 상호작용 컨텍스트를 업데이트하기를 호출한다.

  2. interaction id를 event의 상호작용 id로 둔다.

  3. document, interaction id, 그리고 event로 상호작용 이벤트 처리 시작을 호출한다.

([EVENT-TIMING]에서 정의된) processingEnd에서, Document document와 InteractionContext interaction context가 주어졌을 때, 다음 단계를 추가한다:

  1. interaction context로 상호작용 이벤트 타이밍 처리 종료를 호출한다.

6.3. Largest Contentful Paint (LCP) 통합

이 명세는 페인트를 상호작용에 귀속하기 위해 [LARGEST-CONTENTFUL-PAINT] 알고리즘에 훅을 건다.

report largest contentful paint에서:

  1. contextToNewLargestCandidate를 새 맵으로 둔다.

  2. paintedImages의 각 record에 대해:

    1. element를 record의 pending image record element로 둔다.

    2. interaction context를 element의 관련 상호작용 컨텍스트로 둔다.

    3. interaction context가 null이면 계속한다.

    4. size를 element의 유효 시각 크기로 둔다.

    5. size가 null이면 계속한다.

    6. interaction context의 최대 콘텐츠풀 페인트가 null이 아니고 size가 interaction context의 최대 콘텐츠풀 페인트의 size보다 작거나 같으면, 계속한다.

    7. contextToNewLargestCandidate[interaction context]가 설정되지 않았거나 size가 contextToNewLargestCandidate[interaction context]의 size보다 큰 경우:

      1. contextToNewLargestCandidate[interaction context]를 element로 설정한다.

  3. paintedTextNodes의 각 textNode에 대해:

    1. interaction context를 textNode의 관련 상호작용 컨텍스트로 둔다.

    2. interaction context가 null이면 계속한다.

    3. size를 textNode의 유효 시각 크기로 둔다.

    4. size가 null이면 계속한다.

    5. interaction context의 최대 콘텐츠풀 페인트가 null이 아니고 size가 interaction context의 최대 콘텐츠풀 페인트의 size보다 작거나 같으면, 계속한다.

    6. contextToNewLargestCandidate[interaction context]가 설정되지 않았거나 size가 contextToNewLargestCandidate[interaction context]의 size보다 큰 경우:

      1. contextToNewLargestCandidate[interaction context]를 textNode로 설정한다.

  4. contextToNewLargestCandidate의 각 interaction context → newLargestElement에 대해:

    1. newLargestElement, document, 그리고 interaction context로 상호작용 콘텐츠풀 페인트 엔트리를 방출하기를 호출한다.

    2. document와 interaction context로 소프트 탐색 방출을 평가하기를 호출한다.

§ 6.4 Container Timing 통합 절은 DOM에 대한 수정이 영향을 받은 요소들의 이전에 보고된 페인트를 재설정하여, [LARGEST-CONTENTFUL-PAINT] 알고리즘에 의해 다시 평가되고 현재 상호작용에 올바르게 귀속되도록 보장하는 방법을 정의한다.
[LARGEST-CONTENTFUL-PAINT] 알고리즘은 관련 상호작용 컨텍스트가 있는 모든 페인트를 무시할 것으로 예상된다. 이러한 페인트들은 이 명세의 § 3.1 InteractionContentfulPaint 인터페이스에서 처리되기 때문이다.

6.4. Container Timing 통합

[CONTAINER-TIMING] API는 공통 DOM 조상별로 렌더링 효과를 그룹화하는 메커니즘을 제공한다. 이 명세는 렌더링 변경을 사용자 상호작용으로 다시 귀속하기 위해 그 메커니즘과 통합된다.

노드 삽입 시, 또는 노드가 다음 방식 중 하나로 수정될 때:

다음 단계를 실행한다:

  1. interaction context를 현재 상호작용 컨텍스트를 가져오기를 호출한 결과로 둔다.

  2. interaction context가 null이 아니면:

    1. 노드의 관련 상호작용 컨텍스트를 interaction context로 설정한다.

    2. 그 노드를 ([CONTAINER-TIMING]에서 정의된) 컨테이너 루트로 지정한다.

    3. 그 노드와 그 모든 자손에 대해, ([PAINT-TIMING]에서 정의된) 이전에 보고된 페인트에서 이들을 Document의 집합으로부터 제거한다.

수정된 서브트리를 이전에 보고된 페인트 집합에서 제거함으로써, 사용자 에이전트는 이러한 요소들의 다음 콘텐츠풀 페인트가 다시 감지되고 새로운 InteractionContext에 올바르게 귀속되도록 보장한다.
참고: "노드 삽입"에 대한 참조는 문서 구조에 새 요소를 추가하는 모든 작업(예: appendChild, innerHTML 업데이트 등)을 포괄하는 고수준 설명이다. 이를 문서 구조 수정을 추적하는 내부 구현 훅에 매핑하는 것은 사용자 에이전트에 달려 있다.
사용자 에이전트는 컨테이너 루트의 희소 트리를 유지하도록 권장된다. 수정된 노드가 이미 같은 상호작용 컨텍스트와 관련된 기존 컨테이너 루트의 자손인 경우, 사용자 에이전트는 중복 루트를 새로 만들지 않도록 선택할 수 있다.

또한 큰 DOM 수정 중 비용이 큰 메인 스레드 작업을 피하기 위해, 사용자 에이전트는 자손들을 이전에 보고된 페인트에서 제거하는 작업을 최적화하도록 권장된다. 즉시 철저한 순회를 수행하는 대신, 사용자 에이전트는 수정된 루트를 "dirty"로 표시하고 이후의 트리 순회(예: 레이아웃 또는 페인트 중)에서 이 상태를 지연 전파할 수 있다. 보이지 않는 것으로 알려진 서브트리나 content-visibility 또는 CSS containment 같은 기존 메커니즘에 의해 건너뛰어지는 서브트리도 이 재설정 과정에서 건너뛸 수 있다.

6.5. Performance Timeline 통합

PerformanceEntry를 큐에 넣기에서, 1단계(엔트리 초기화) 이후 다음 단계를 추가한다:

  1. newEntry의 탐색 id가 0이면:

    1. newEntry의 탐색 id를 global의 현재 탐색 id로 설정한다.

7. 겹치는 상호작용 및 경합 조건

이 절은 비규범적이다.

웹 애플리케이션은 종종 여러 사용자 상호작용을 빠르게 연속해서 처리한다. 이 명세는 다음 모델을 통해 이러한 겹치는 상호작용을 처리한다:

8. 보안 및 개인정보 고려사항

성능 타임라인에 소프트 탐색을 노출하는 것 자체는 보안 및 개인정보에 영향을 미치지 않는다. 그러나 감지된 소프트 탐색의 결과로 다양한 paint timing 엔트리를 재설정하는 것은 영향을 미칠 수 있으며, 특히 방문한 링크가 파티션되기 전에는 더욱 그렇다. 따라서 :visited 캐시를 파티션하지 않은 상태에서 이러한 페인트 작업을 노출하는 것은 해당 페인트 작업이 출처를 가로질러 사용자의 히스토리를 노출하지 않도록 신중히 분석한 뒤에만 수행되어야 한다.

색인

이 명세에서 정의한 용어

참조로 정의된 용어

참고문헌

규범적 참고문헌

[DOM]
Anne van Kesteren. DOM Standard. Living Standard. URL: https://dom.spec.whatwg.org/
[EVENT-TIMING]
Michal Mocny. Event Timing API. URL: https://w3c.github.io/event-timing/
[HR-TIME-3]
Yoav Weiss. High Resolution Time. URL: https://w3c.github.io/hr-time/
[HTML]
Anne van Kesteren; et al. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[INFRA]
Anne van Kesteren; Domenic Denicola. Infra Standard. Living Standard. URL: https://infra.spec.whatwg.org/
[LARGEST-CONTENTFUL-PAINT]
Yoav Weiss. Largest Contentful Paint. URL: https://w3c.github.io/largest-contentful-paint/
[NAVIGATION-TIMING-2]
Yoav Weiss; Noam Rosenthal. Navigation Timing Level 2. URL: https://w3c.github.io/navigation-timing/
[PERFORMANCE-TIMELINE]
Nicolas Pena Moreno. Performance Timeline. URL: https://w3c.github.io/performance-timeline/
[WEBIDL]
Edgar Chen; Timothy Gu. Web IDL Standard. Living Standard. URL: https://webidl.spec.whatwg.org/

정보성 참고문헌

[ASYNC-CONTEXT]
AsyncContext. URL: https://github.com/tc39/proposal-async-context
[CONTAINER-TIMING]
Container Timing API. URL: https://github.com/WICG/container-timing
[NAVIGATION-TIMING]
Zhiheng Wang. Navigation Timing. 2012년 12월 17일. REC. URL: https://www.w3.org/TR/navigation-timing/
[PAINT-TIMING]
Ian Clelland; Noam Rosenthal. Paint Timing. URL: https://w3c.github.io/paint-timing/

IDL 색인

[Exposed=Window]
interface InteractionContentfulPaint : PerformanceEntry {
    readonly attribute DOMHighResTimeStamp renderTime;
    readonly attribute DOMHighResTimeStamp loadTime;
    readonly attribute unsigned long long size;
    readonly attribute DOMString id;
    readonly attribute DOMString url;
    readonly attribute Element? element;
    readonly attribute unsigned long long interactionId;

    object toJSON();
};

InteractionContentfulPaint includes PaintTimingMixin;

[Exposed=Window]
interface SoftNavigationEntry : PerformanceEntry {
    readonly attribute DOMString navigationType;
    readonly attribute unsigned long long interactionId;
    readonly attribute InteractionContentfulPaint? largestInteractionContentfulPaint;
};

SoftNavigationEntry includes PaintTimingMixin;

[Exposed=(Window,Worker)]
partial interface PerformanceEntry {
    readonly attribute unsigned long long navigationId;
};