最大内容绘制

<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。

我们如下修改事件分发算法：

在第1步之后添加如下步骤：

• 如果target的相关全局对象为Window 对象，event的type 为scroll 且isTrusted 为 true，则将target的相关全局对象的已触发滚动事件设为 true。

当被要求根据 报告最大内容绘制、 Document document、 绘制时序信息 paintTimingInfo、一个 有序集合 的 待处理图片记录 paintedImages，以及一个 有序集合 的 元素 paintedTextNodes时，执行以下步骤：

注意： paintedImages 中每个待处理图片记录和 paintedTextNodes 中的文本元素，只会被 标记绘制时序 报告一次，且仅在该元素首次被认为可绘制（即具有透明度和可见性）且可内容化（即图片资源或阻塞字体已充分加载）的绘制时进行。

1. 令 window 为 document 的 相关全局对象。

2. 如果 window 的 已派发滚动事件 或 已派发输入事件 有一个为 true，则返回。

3. 令 newCandidateSize 为 document 的 最大内容绘制尺寸。

4. 令 newCandidate 为 null。

5. 遍历 paintedImages 中的每个 record：

   1. 令 imageElement 为 record 的 元素。

   2. 如果 imageElement 在 document 下不 暴露用于绘制时序，则继续。

   3. 令 intersectionRect 为交集区域算法以 imageElement 为目标、视口为根返回的值。

   4. 令 size 为 有效视觉尺寸，以 intersectionRect 和 record 的 请求 为参数，针对 imageElement 计算。

   5. 如果 size 小于或等于 newCandidateSize，则继续。

   6. 将 newCandidateSize 设置为 size。

   7. 将 newCandidate 设置为新的 最大内容绘制候选项， 其 元素 为 imageElement， 尺寸 为 size， 请求 为 record 的 请求， 加载时间 为 record 的 加载时间。

6. 遍历 paintedTextNodes 中的每个 textNode，

   1. 如果 textNode 在 document 下不 暴露用于绘制时序，则继续。

   2. 如果 textNode 的 alpha通道 值 <=0 或 透明度 值 <=0：

      1. 若 textNode 的 text-shadow 值为 none， 且 textNode 的 stroke-color 值为 透明，并且 textNode 的 stroke-image 值为 none，则继续。

   3. 令 intersectionRect 为所有 Text 节点 的边框盒的并集，与视觉视口相交。

   4. 令 size 为 textNode 的 有效视觉尺寸，参数为 intersectionRect 和 null。

   5. 如果 size 小于或等于 newCandidateSize，则继续。

   6. 将 newCandidateSize 设置为 size。

   7. 将 newCandidate 设置为新的 最大内容绘制候选项， 其 元素 为 textNode， 尺寸 为 size， 请求 为 null， 加载时间 为 0。

7. 如果 newCandidate 不为 null：

   1. 创建 LargestContentfulPaint 条目，参数为 newCandidate、 paintTimingInfo 和 document。

输入

intersectionRect，一个 DOMRectReadOnly

imageRequest，一个 Request 或 null

element，一个 Element

document，一个 Document

输出

要用于 Largest Contentful Paint 报告的像素数，或者如果该元素不应作为 LCP 候选，则为 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 不为 null，按以下步骤调整图片的位置和缩放：

   1. 如果 imageRequest 的 response 的内容字节数小于 size * 0.004，则返回 null。

      注：该启发式方法用于判断图片资源是否包含足够多的数据以被用户视为内容。它比较传输文件的大小与实际解码和缩放后产生的像素数。极少字节编码大量像素的图片通常是低内容背景或渐变等，这类不会作为 LCP 候选。

   2. 令 concreteDimensions 为 imageRequest 的 具体对象尺寸（在 element 内）。

   3. 令 visibleDimensions 为 concreteDimensions，基于 object-position 或 background-position 及 element 的 内容框 进行位置调整。

      注：这些算法在 CSS 规范中并未严格定义。预期结果是获得 element 中图片的实际位置和大小，并表示为 DOMRectReadOnly。

   4. 令 clientContentRect 为包含 visibleDimensions 并应用 element 变换 的最小 DOMRectReadOnly。

   5. 令 intersectingClientContentRect 为 clientContentRect 与 intersectionRect 的交集。

   6. 将 size 设为 intersectingClientContentRect 的 width * intersectingClientContentRect 的 height。

      注：这样可保证只与图片本身而非元素装饰部分做相交。

   7. 令 naturalArea 为 imageRequest 的 natural width * imageRequest 的 natural height。

   8. 如果 naturalArea 为 0，则返回 null。

   9. 令 boundingClientArea 为 clientContentRect 的 width * clientContentRect 的 height。

   10. 令 scaleFactor 为 boundingClientArea / naturalArea。

   11. 如果 scaleFactor 大于 1，则用 size 除以 scaleFactor。

9. 返回 size。

输入

candidate，一个 最大内容绘制候选项

paintTimingInfo，一个 绘制时序信息

document，一个 文档

输出

无

1. 将 document 的 最大内容绘制大小 设置为 candidate 的 尺寸。

2. 令 url 为空字符串。

3. 如果 candidate 的 请求 不为 null， 则将 url 设置为 candidate 的 请求 的 请求 URL。

4. 令 entry 为新的 LargestContentfulPaint 条目，使用 document 的 相关领域，其 绘制时序信息 为 paintTimingInfo，如下设置：

   • size 设置为 candidate 的 尺寸，

   • url 设置为 url，

   • id 设置为 candidate 的 元素 的 元素id，

   • loadTime 设置为 candidate 的 加载时间，

   • 并且 element 设置为 candidate 的 元素。

5. 队列 PerformanceEntry entry。