最大内容绘制

<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. 令 newCandidate 为在给定 document、paintedImages、 paintedTextNodes以及 document的当前最大内容绘制候选项的情况下，计算新的最大内容绘制候选项的结果。

4. 如果 newCandidate 为 null，则返回。

5. 将 document的当前最大内容绘制候选项设置为 newCandidate。

6. 令 entry 为使用 newCandidate、paintTimingInfo和 document创建 LargestContentfulPaint 条目的结果。

7. 将 PerformanceEntry entry入队。

要在给定一个 Document document、一个由待处理图像记录组成的有序集合 paintedImages、一个由元素组成的有序集合 paintedTextNodes，以及一个最大内容绘制候选项或 null currentCandidate的情况下，计算新的最大内容绘制候选项，执行以下步骤。这些步骤 返回一个最大内容绘制候选项或 null。

1. 如果 currentCandidate 不为 null，则令 currentSize 为 currentCandidate的尺寸；否则为 0。

2. 令 largestSize 为 currentSize。

3. 令 newCandidate 为 null。

4. 对于 paintedImages中的每个 record：

   1. 令 imageElement 为 record的元素。

   2. 如果在给定 document的情况下，imageElement未暴露给绘制时序，则继续。

   3. 令 intersectionRect 为以 imageElement作为目标、以视口作为根 运行交集矩形算法所返回的值。

   4. 令 result 为在给定 intersectionRect和 record的请求的情况下， imageElement的有效视觉尺寸。

   5. 如果 result 为 null，则继续。

   6. 如果 result的尺寸小于或等于 largestSize，则继续。

   7. 将 largestSize设置为 result的尺寸。

   8. 将 newCandidate设置为一个新的最大内容绘制候选项，其值如下：

      1. 元素设置为 imageElement。

      2. 尺寸设置为 result的尺寸。

      3. 宽度设置为 result的宽度。

      4. 高度设置为 result的高度。

      5. 请求设置为 record的请求。

      6. loadTime设置为 record的loadTime。

5. 对于 paintedTextNodes中的每个 textNode，

   1. 如果在给定 document的情况下，textNode未暴露给绘制时序，则继续。

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

      1. 如果 textNode的text-shadow值为 none， textNode的stroke-color值为transparent，并且 textNode的stroke-image值为 none，则继续。

   3. 令 intersectionRect 为 textNode的所拥有文本节点集合中所有 Text 节点的边框框并集与可视视口相交所得的结果。

   4. 令 result 为在给定 intersectionRect和 null 的情况下， textNode的有效视觉尺寸。

   5. 如果 result 为 null，则继续。

   6. 如果 result的尺寸小于或等于 largestSize，则继续。

   7. 将 largestSize设置为 result的尺寸。

   8. 将 newCandidate设置为一个新的最大内容绘制候选项，其值如下：

      1. 元素设置为 textNode。

      2. 尺寸设置为 result的尺寸。

      3. 宽度设置为 result的宽度。

      4. 高度设置为 result的高度。

      5. 请求设置为 null。

      6. loadTime设置为 0。

6. 如果 newCandidate不为 null 且 currentSize大于 0：

   1. 如果 newCandidate的宽度减去 currentCandidate的宽度小于或等于 3，并且 newCandidate的高度减去 currentCandidate的高度小于或等于 3，则返回 null。

7. 返回 newCandidate。

输入

intersectionRect，一个 DOMRectReadOnly

imageRequest，一个 Request 或 null

element，一个元素

document，一个文档

输出

一个有效视觉尺寸结果，它是一个结构体，包含尺寸（一个数值）、宽度（一个数值）以及高度（一个数值），表示要为最大内容绘制报告的有效视觉尺寸、宽度和高度， 单位为像素；如果该元素不应作为 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 中没有严格定义。预期结果是以一个 DOMRectReadOnly 获取图像在 element中的实际位置和尺寸。

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

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

   6. 将 width设置为 intersectingClientContentRect的 width， 向上舍入到最接近的整数。

   7. 将 height设置为 intersectingClientContentRect的 height， 向上舍入到最接近的整数。

   8. 将 size设置为 width * height。

      注：这可确保我们 仅与图像本身相交，而不与元素的装饰相交。

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

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

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

   12. 令 scaleFactor 为 boundingClientArea / naturalArea。

   13. 如果 scaleFactor 大于 1，则将 size除以 scaleFactor。

9. 返回一个有效视觉尺寸结果，其中尺寸设置为 size，宽度设置为 width， 并且高度设置为 height。

输入

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

paintTimingInfo，一个绘制时序信息

document，一个 Document

输出

一个 LargestContentfulPaint

1. 令 url 为空字符串。

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

3. 令 entry 为一个新的 LargestContentfulPaint 条目，它使用 document的相关领域，其绘制时序信息为 paintTimingInfo， 并将其

   • size 设置为 candidate的尺寸，

   • url 设置为 url，

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

   • loadTime 设置为 candidate的loadTime，

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

4. 返回 entry。