페인트 타이밍

1. 소개

const observer = new PerformanceObserver(function(list) {
    const perfEntries = list.getEntries();
    for (const perfEntry of perfEntries) {
        // 엔트리 처리
        // 분석 및 모니터링을 위한 보고
        // ...
    }
});

// 페인트 타이밍 알림을 위한 옵저버 등록
observer.observe({entryTypes: ["paint"]});

2. 용어

페인트: 사용자 에이전트가 렌더 트리를 화면의 픽셀로 변환하면 "페인트"(또는 "렌더")를 수행한 것으로 간주한다. 공식적으로, 사용자 에이전트가 렌더링 업데이트 이벤트 루프 단계를 수행했을 때 "렌더링"했다고 본다.

참고: 렌더링 파이프라인은 매우 복잡하며, 타임스탬프는 사용자 에이전트가 이 파이프라인에서 기록할 수 있는 가장 마지막 타임스탬프(최대한의 노력)를 사용해야 한다. 일반적으로 프레임이 OS에 표시를 위해 제출되는 시점이 이 API에 권장된다.

생성된 콘텐츠 가상 요소는 아래 조건이 모두 충족될 때 페인트 가능한 가상 요소이다:

• 의사 요소의 사용된 가시성(visibility) 은 visible입니다.

• 의사 요소의 사용된 불투명도(opacity)가 0보다 큽니다.

• 의사 요소가 비어 있지 않은 박스(box)를 생성합니다.

CSS 이미지 img는 아래 조건이 모두 충족될 때 콘텐츠가 있는 이미지이다:

• img가 url 값이다.

• img가 사용 가능하다.

DOMString 은 비어 있지 않음 상태는 문서 공백 문자를 제외한 문자가 하나 이상 포함된 경우다.

요소 target은 아래 중 하나라도 충족되면 콘텐츠 있음이다:

• target이 텍스트 노드 자식을 가지고 있고, 비어 있지 않은 텍스트를 나타내며, 그 노드의 used opacity가 0보다 크다.

  참고: 이는 타이포그래픽 가상 요소가 텍스트 노드의 opacity를 오버라이드하는 경우를 포함한다.

• target이 대체 요소이며, 사용 가능한 이미지를 나타낸다.

• target이 background-image로 콘텐츠가 있는 이미지를 가지고 있고, used background-size가 0이 아닌 너비와 높이 값을 가진다.

• target이 canvas 이고, context mode가 none이 아닌 값으로 설정됨.

• target이 video 요소이고, 대표하는 포스터 프레임 또는 첫 번째 비디오 프레임이 있으며, 그 프레임이 사용 가능하다.

• target이 렌더링된 자손을 가진 SVG 요소이다.

• target이 input 요소이고, 비어 있지 않은 value 속성이 있다.

• target이 가상 요소의 기원 요소이고, 그 가상 요소가 페인트 가능한 가상 요소로서 콘텐츠가 있는 이미지 또는 비어 있지 않은 텍스트를 나타낸다.

요소는 타이밍 대상이 될 수 있는 경우는 아래와 같다:

• img 요소.

• image 요소, 단 svg 요소 내부에 있을 것.

• video 요소로, 포스터 프레임이 있다.

• 요소에 콘텐츠가 있는 background-image가 있다.

• 텍스트 노드.

페인트 가능한 경계 사각형을 요소 target에 대해 계산하려면 다음 단계를 수행한다:

1. boundingRect를 getBoundingClientRect() 를 target에 실행한 결과로 설정한다.

2. boundingRect를 문서의 스크롤 영역으로 클리핑한다.

3. boundingRect를 반환한다.

참고: overflow: scroll 또는 overflow: hidden 박스에 포함된 요소는 페인트 가능한 경계 사각형이 클리핑되지 않는다. 두 경우 모두 요소가 스크롤을 통해 표시될 수 있기 때문이다.

요소 el은 아래 조건이 모두 충족될 때 페인트 가능하다:

• el이 렌더링 중이다.

• el의 사용된 가시성(visibility) 은 visible입니다.

• el 및 모든 조상 요소의 used opacity가 0보다 크다.

  참고: 페인트 가능 요소가 사용자에게 실제로 보이지 않는 경우도 있을 수 있다. 예를 들어, 텍스트가 배경색과 같을 때 등이다. 이러한 요소도 첫 콘텐츠 페인트를 계산할 때는 페인트 가능으로 간주한다.

• el의 페인트 가능한 경계 사각형이 문서의 스크롤 영역과 교차한다.

  참고: 요소가 크기가 0으로 스케일되거나 display: none 또는 display: contents로 설정되어 내용이 빈 사각형일 때를 포함한다.

  참고: 일반적으로 요소가 뷰포트 내에 있거나, 스크롤 또는 확대/축소로 뷰포트에 들어올 수 있으면 페인트 가능하다.

첫 페인트 엔트리는 DOMHighResTimeStamp 를 포함하고, 이는 사용자 에이전트가 내비게이션 후 처음으로 렌더링한 시점을 보고한다. 기본 배경 페인트는 제외하지만, 비기본 배경 페인트와 iframe의 외곽 박스는 포함한다. 이는 페이지 로드에서 개발자가 가장 중요하게 여기는 첫 순간으로, 사용자 에이전트가 페이지 렌더링을 시작한 시점이다.

브라우징 컨텍스트 ctx는 아래 조건 중 하나라도 충족되면 페인트 타이밍 대상이다:

• ctx가 최상위 브라우징 컨텍스트일 때.

• ctx가 중첩 브라우징 컨텍스트이고, 사용자 에이전트가 ctx에 대해 페인트 타이밍 보고를 설정한 경우.

  참고: 이는 사용자 에이전트가 원한다면 메인 프레임 외에도 일부 프레임에만 페인트 타이밍을 활성화할 수 있도록 한다. 예를 들어, 사용자 에이전트가 교차 출처 iframe에 대해 페인트 타이밍을 비활성화하도록 결정할 수 있는데, 일부 상황에서는 해당 프레임의 페인트 타이밍이 메인 프레임의 정보를 노출할 수 있기 때문이다.

3. 페인트 타이밍 믹스인

3.1. PaintTimingMixin 인터페이스

[Exposed=Window]
interface mixin PaintTimingMixin {
    readonly attribute DOMHighResTimeStamp paintTime;
    readonly attribute DOMHighResTimeStamp? presentationTime;
};

PaintTimingMixin 인터페이스 믹스를 포함하는 객체는 페인트 타이밍 정보 (null 또는 페인트 타이밍 정보)를 가집니다.

페인트 타이밍 정보는 구조체입니다. 다음과 같은 항목들을 가집니다:

렌더링 업데이트 종료 시간

DOMHighResTimeStamp

구현 정의된 표시 시간

null 또는 DOMHighResTimeStamp

paintTime 속성의 getter 단계는 this의 페인트 타이밍 정보의 렌더링 업데이트 종료 시간을 반환하는 것입니다.

presentationTime 속성의 getter 단계는 존재한다면 this의 페인트 타이밍 정보의 구현 정의된 표시 시간을 반환하는 것입니다.

기본 페인트 타임스탬프를 페인트 타이밍 정보 paintTimingInfo에 대해 가져오기 위해, paintTimingInfo의 구현 정의된 표시 시간이 null이 아니라면 반환하고, 그렇지 않으면 paintTimingInfo의 렌더링 업데이트 종료 시간을 반환합니다.

4. PerformancePaintTiming 인터페이스

[Exposed=Window]
interface PerformancePaintTiming : PerformanceEntry {
    [Default] object toJSON();
};
PerformancePaintTiming includes PaintTimingMixin;

PerformancePaintTiming 인터페이스는 PerformanceEntry 인터페이스의 다음 속성들을 확장합니다:

• name 속성의 getter는 최소 프레임 특성을 위한 DOMString 을 반환해야 합니다. name의 가능한 값은 다음과 같습니다:

  • "first-paint": 첫 번째 페인트에 사용됩니다.

  • "first-contentful-paint": 첫 번째 의미 있는 페인트에 사용됩니다.

• entryType 속성의 getter는 "paint"를 반환해야 합니다.

• startTime 속성의 getter는 페인트가 발생한 시간을 나타내는 DOMHighResTimeStamp 를 반환해야 합니다.

• duration 속성의 getter는 0을 반환해야 합니다.

• toJSON이 호출되면, PerformancePaintTiming 에 대해 기본 toJSON 단계를 실행합니다.

NOTE: PerformancePaintTiming 을 구현하는 사용자 에이전트는 글로벌 객체의 "paint"를 supportedEntryTypes 에 포함해야 하며, 해당 브라우징 컨텍스트가 paint-timing eligible일 경우에 해당됩니다. 이를 통해 개발자는 특정 브라우징 컨텍스트에 대해 페인트 타이밍 지원 여부를 감지할 수 있습니다.

5. 처리 모델

5.1. 연관된 이미지 요청

각 Element 는 연관된 이미지 요청을 가지며, 이는 이미지 요청이거나 null이며, 초기값은 null입니다.

만약 Element element가 HTMLImageElement, SVGImageElement, 또는 HTMLVideoElement 타입일 때, 새로운 이미지 리소스(예: 이미지 또는 포스터 이미지로 표시될 이미지 리소스)를 생성하면 element의 연관된 이미지 요청은 생성된 이미지 리소스의 이미지 요청으로 설정됩니다.

Note: "data" 스킴과 동일한 URL에서 가져온 모든 이미지 리소스는 이미지 요청을 가지며, 이는 네트워크 요청 없이 로드되어야 하지만, 여전히 로딩이 필요합니다. 이러한 요청은 Element 의 연관된 이미지 요청이 될 수 있습니다.

Note: 현재 언어는 특정 알고리즘을 명시하지 않아 다소 모호합니다. 해당 처리 모델이 더 통합된 형태가 되면 이를 더 엄격하게 정의할 수 있습니다.

모든 Element 는 연관된 배경 이미지 요청 목록(초기에는 빈 배열)을 가집니다. Element element의 스타일에 의해 새로운 이미지 리소스(배경 이미지로 표시될)가 필요할 때, 새 리소스가 생성한 이미지 요청이 element의 연관된 배경 이미지 요청 목록에 추가됩니다.

NOTE: Element 는 여러 개의 이미지 요청을 가질 수 있습니다. 예를 들어, background-image 속성에 여러 값이 있을 때 입니다. 아래 예시처럼 하나의 background-image 속성이 네 개의 이미지 요청을 생성하고, 각각은 아래 알고리즘에 의해 기록 및 보고됩니다.

<!DOCTYPE html>
<style>
div {
  background-image: url(https://images.example/background1.png),
                    url(https://images.example/background2.png);
}
</style>
<div></div>
<div></div>

5.2. 페인트 타이밍 기록

pending image record는 다음과 같은 구조체의 항목들을 가진 구조체입니다:

• element, Element

• request, 이미지 요청

• loadTime, DOMHighResTimeStamp

Element 는 소유 텍스트 노드 집합을 가지며, 이는 순서 집합의 Text 노드들로, 초기값은 빈 집합이다.

Document 는 이전에 보고된 페인트 집합을 가지며, 이는 순서 집합의 문자열로, 초기값은 빈 집합이다.

Document 는 렌더링 대기 이미지들을 가지며, 이는 리스트의 대기 중인 이미지 기록으로, 초기값은 빈 리스트이다.

Document 는 렌더링된 텍스트를 가진 요소 집합을 가지며, 이는 순서 집합의 Element들로, 초기값은 빈 집합이다.

5.2.1. CSS 명세의 수정 사항

이미지 요청이 Element element의 연관 배경 이미지 요청에 있고 완전히 사용 가능해지면, element와 이미지 요청을 입력값으로 로딩이 완료된 이미지를 처리 알고리즘을 실행한다.

5.2.2. HTML 명세의 수정 사항

Element element의 연결된 이미지 요청이 완전히 사용 가능하게 되면, element와 그 연결된 이미지 요청을 입력값으로 하여 로딩이 완료된 이미지를 처리하는 알고리즘을 실행한다.

5.2.3. 로딩이 완료된 이미지 처리

5.3. 페인트 타이밍 보고

5.3.1. 첫 콘텐츠 페인트

5.3.2. 페인트 타이밍 표시

5.3.3. 페인트 타이밍 보고

5.4. 공통 알고리즘

5.4.1. 페인트 타이밍에 노출됨

6. 감사의 글

이 명세 개선을 위해 기술적 의견과 제안을 해준 모든 기여자에게 특별히 감사드립니다.