最大内容绘制

<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，一个 元素

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 的 响应 的内容长度（字节）小于 size * 0.004，则返回 null。

      注意： 此启发式方法测试图片资源是否包含足够数据，以便用户感知到内容。它比较传输文件的大小和实际生成的像素数量（经过解码和任意图像缩放后）。以极少字节编码大量像素的图片通常是低内容背景、渐变等，不视为 LCP 候选项。

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

   3. 令 visibleDimensions 为 concreteDimensions， 按 object-position， background-position， 和 element 的 内容盒进行定位调整。

   注意： 部分相关算法在 CSS 中并未严格定义。预期结果是获得 element 中图像的实际位置与尺寸，以 DOMRectReadOnly 表示。

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

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

   3. 设置 size 为 intersectingClientContentRect 的 width * intersectingClientContentRect 的 height。

   注意： 这样做确保仅与图片本身而不是元素装饰部分相交。

   1. 令 naturalArea 为 imageRequest 的 自然宽度 * imageRequest 的 自然高度。

   2. 如 naturalArea 为 0，则返回 null。

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

   4. 令 scaleFactor 为 boundingClientArea / naturalArea。

   5. 如 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。