가장 큰 콘텐츠 페인트

<img src="large_image.jpg">
<p id='large-paragraph'>This is large body of text.</p>
...
<script>
const observer = new PerformanceObserver((list) => {
  let perfEntries = list.getEntries();
  let lastEntry = perfEntries[perfEntries.length - 1];
  // Process the latest candidate for largest contentful paint
});
observer.observe({entryTypes: ['largest-contentful-paint']});
</script>

[Exposed=Window]
interface LargestContentfulPaint : PerformanceEntry {
    readonly attribute DOMHighResTimeStamp loadTime;
    readonly attribute DOMHighResTimeStamp renderTime;
    readonly attribute unsigned long size;
    readonly attribute DOMString id;
    readonly attribute DOMString url;
    readonly attribute Element? element;
    [Default] object toJSON();
};

LargestContentfulPaint includes PaintTimingMixin;

1. this의 element가 null을 기준으로 페인트 타이밍에 노출됨이 아니라면, null을 반환.

2. this의 element 반환.

event dispatch algorithm을 다음과 같이 수정합니다.

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

• target의 관련 전역 객체가 Window 오브젝트이고, event의 type 이 scroll 이며, isTrusted 가 true이면, target의 관련 전역 객체의 스크롤 이벤트 발생 여부를 true로 설정합니다.

최대 콘텐츠 페인트 보고를 요청받으면 Document document, 페인트 타이밍 정보 paintTimingInfo, 순서 있는 집합 형태의 보류 중인 이미지 레코드 paintedImages, 그리고 순서 있는 집합 형태의 요소 paintedTextNodes가 주어지면, 다음 단계를 수행한다:

1. 각 paintedImages의 record에 대해:

   1. imageElement를 record의 element로 지정합니다.

   2. imageElement가 document에 대해 페인트 타이밍에 노출되지 않은 경우, 다음으로 진행합니다.

   3. request를 record의 request로 지정합니다.

   4. candidate를 (imageElement, request)로 지정합니다.

   5. intersectionRect를 imageElement를 대상으로, viewport를 루트로 사용하는 intersection rect 알고리즘의 반환값으로 지정합니다.

   6. LargestContentfulPaint 엔트리 잠재적으로 추가를 candidate, intersectionRect, paintTimingInfo, record의 loadTime, document와 함께 호출합니다.

2. 각 paintedTextNodes의 textNode에 대해,

   1. textNode가 document에 대해 페인트 타이밍에 노출되지 않은 경우, 다음으로 진행합니다.

   2. textNode가 알파 채널 값이 0 이하이거나 투명도 값이 0 이하인 경우:

      1. textNode의 text-shadow 값이 none이고, textNode의 stroke-color 값이 transparent이며 textNode의 stroke-image 값이 none이면, 다음으로 진행합니다.

   3. candidate를 (textNode, null)로 지정합니다.

   4. intersectionRect를 빈 사각형으로 지정합니다.

   5. 각 Text node text가 textNode의 set of owned text nodes에 있을 때:

      1. intersectionRect를 text의 border box와 intersectionRect를 포함하는 가장 작은 사각형으로 확장합니다.

   6. intersectionRect와 시각적 뷰포트를 교집합합니다.

   7. LargestContentfulPaint 엔트리 잠재적으로 추가를 candidate, intersectionRect, paintTimingInfo, 0, document와 함께 호출합니다.

입력

intersectionRect, DOMRectReadOnly

imageRequest, Request

element, Element

document, Document

출력

Largest Contentful Paint용 보고 크기(픽셀). 후보가 되지 않으면 null을 반환합니다.

1. width를 intersectionRect의 width로 설정합니다.

2. height를 intersectionRect의 height로 설정합니다.

3. size를 width * height로 설정합니다.

4. root를 document의 탐색 컨텍스트의 최상위 탐색 컨텍스트의 활성 문서로 설정합니다.

5. rootWidth를 root의 비쥬얼 뷰포트의 가로 길이(스크롤바 제외)로 설정합니다.

6. rootHeight를 root의 비쥬얼 뷰포트의 세로 길이(스크롤바 제외)로 설정합니다.

7. size가 rootWidth × rootHeight와 같으면 null 반환.

8. imageRequest가 largest contentful paint 적격이 아니라면 null 반환.

9. imageRequest가 null이 아니면, 이미지 위치와 업스케일링을 반영해 다음 단계를 수행합니다:

   1. concreteDimensions를 imageRequest의 구체 객체 크기(element 내)로 설정합니다.

   2. visibleDimensions를 concreteDimensions로 하되, object-position 또는 background-position 및 element의 content box에 따라 위치를 조정합니다.

   참고: 일부 알고리즘은 CSS에서 엄격하게 정의되어 있지 않습니다. 기대 결과는 element 내 실제 이미지의 위치와 크기를 DOMRectReadOnly로 얻는 것입니다.

   1. clientContentRect를 element의 변형(transform)을 적용한 visibleDimensions를 포함하는 가장 작은 DOMRectReadOnly로 설정합니다.

   2. intersectingClientContentRect를 clientContentRect와 intersectionRect의 교집합으로 설정합니다.

   3. size를 intersectingClientContentRect의 width * intersectingClientContentRect의 height로 설정합니다.

   참고: 이는 실제 이미지 자체만 교집합 대상이 되어 요소 장식이 포함되지 않도록 보장합니다.

   1. naturalArea를 imageRequest의 원본 너비(natural width) * imageRequest의 원본 높이(natural height)로 설정합니다.

   2. naturalArea가 0이면 null 반환.

   3. boundingClientArea를 clientContentRect의 width * clientContentRect의 height로 설정합니다.

   4. scaleFactor를 boundingClientArea / naturalArea로 설정합니다.

   5. scaleFactor가 1보다 크면 size를 scaleFactor로 나눕니다.

10. size 반환.

입력

candidate, largest contentful paint 후보

intersectionRect, DOMRectReadOnly

paintTimingInfo, paint timing info

loadTime, DOMHighResTimestamp

document, Document

출력

없음

1. document의 content set이 candidate를 포함하면 반환합니다.

2. candidate를 content set에 추가합니다.

3. window를 document의 관련 전역 객체로 설정합니다.

4. window의 스크롤 이벤트 발생 여부 또는 입력 이벤트 발생 여부 중 하나라도 true이면 반환.

5. size를 intersectionRect 기준 실효 시각 크기(candidate의 element)로 설정합니다.

6. size가 document의 largest contentful paint size 이하이면 반환합니다.

7. url을 빈 문자열로 설정합니다.

8. candidate의 request가 null이 아니면, url을 해당 request URL로 설정합니다.

9. id를 candidate의 element의 element id로 설정합니다.

10. contentInfo를 map으로 하여, contentInfo["size"] = size, contentInfo["url"] = url, contentInfo["id"] = id, contentInfo["loadTime"] = loadTime, contentInfo["element"] = candidate의 element로 설정합니다.

11. LargestContentfulPaint 엔트리 생성를 contentInfo, paintTimingInfo, document를 인자로 호출합니다.

입력

contentInfo, map

paintTimingInfo, paint timing info

document, Document

출력

없음

1. document의 largest contentful paint size를 contentInfo["size"]로 설정합니다.

2. entry를 관련 realm을 가진 새로운 LargestContentfulPaint entry로 하며, paint timing info는 paintTimingInfo로 지정하고,

   • size 를 contentInfo["size"]로,

   • url 를 contentInfo["url"]로,

   • id 를 contentInfo["id"]로,

   • loadTime 를 contentInfo["loadTime"]로,

   • 그리고 element 를 contentInfo["element"]로 설정합니다.

3. PerformanceEntry entry를 큐에 넣습니다.