最大内容绘制

<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、一个 绘制时序信息（paint timing info） paintTimingInfo、一个 有序集合 待处理图片记录 paintedImages，以及一个 有序集合 元素 paintedTextNodes 时，执行如下步骤：

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

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

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

3. 令 currentSize 为 document 的 最大内容绘制面积。

4. 令 currentWidth 为 document 的 最大内容绘制宽度。

5. 令 currentHeight 为 document 的 最大内容绘制高度。

6. 令 largestSize 为 currentSize。

7. 令 newCandidate 为 null。

8. 对于每一个 paintedImages 中的 record：

   1. 令 imageElement 为 record 的 元素。

   2. 如果 imageElement 不是 对绘制时序可暴露（给定 document），则进入下一个循环。

   3. 令 intersectionRect 为以 imageElement 为目标、视口为根执行“相交区域算法”返回的值。

   4. 令 result 为 imageElement，给定 intersectionRect 和 record 的 请求 的 有效可视尺寸。

   5. 如果 result 为 null，进入下一个循环。

   6. 如果 result 的 面积 小于或等于 largestSize，进入下一个循环。

   7. 令 largestSize 为 result 的 面积。

9. 设置 newCandidate 为新的 最大内容绘制候选，并赋以下值：

   1. element 赋值为 imageElement。

   2. size 赋值为 result 的 面积。

   3. width 赋值为 result 的 宽度。

   4. height 赋值为 result 的 高度。

   5. request 赋值为 record 的 request。

   6. loadTime 赋值为 record 的 loadTime。

10. 对于每一个 paintedTextNodes 中的 textNode，

    1. 如果 textNode 不是 对绘制时序可暴露（给定 document），则进入下一个循环。

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

       1. 如果 textNode 的 text-shadow 属性为 none，且 textNode 的 stroke-color 属性为 透明，且 textNode 的 stroke-image 属性为 none，则进入下一个循环。

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

    4. 令 result 为 textNode，给定 intersectionRect 和 null 的 有效可视尺寸。

    5. 如果 result 为 null，进入下一个循环。

    6. 如果 result 的 面积 小于或等于 largestSize，进入下一个循环。

    7. 令 largestSize 为 result 的 面积。

    8. 设置 newCandidate 为新的 最大内容绘制候选，并赋以下值：

       1. element 赋值为 textNode。

       2. size 赋值为 result 的 面积。

       3. width 赋值为 result 的 宽度。

       4. height 赋值为 result 的 高度。

       5. request 赋值为 null。

       6. loadTime 赋值为 0。

11. 如果 newCandidate 非空：

    1. 如果 currentSize 大于 0：

       1. 如果 newCandidate 的 width 减去 currentWidth 的结果小于等于 3，且 newCandidate 的 height 减去 currentHeight 的结果小于等于 3，则返回。

    2. 创建 LargestContentfulPaint 记录，参数为 newCandidate、paintTimingInfo 和 document。

输入

intersectionRect，一个 DOMRectReadOnly

imageRequest，一个 Request 或 null

element，一个 元素（Element）

document，一个 文档（Document）

输出

一个 有效可视尺寸结果（effective visual size result），这是一个 结构对象（struct），包含 size（数字）、width（数字）、以及 height（数字），代表报告给最大内容绘制（Largest Contentful Paint, LCP）的有效可视面积、宽度和高度（像素），或为 null 表示该元素不应作为 LCP 候选。

1. 令 width 为 intersectionRect 的 width， 向上取整。

2. 令 height 为 intersectionRect 的 height， 向上取整。

3. 令 size 为 width * height。

4. 令 root 为 document 的 浏览上下文（browsing context）的 顶层浏览上下文（top-level browsing context）的 活动文档（active document）。

5. 令 rootWidth 为 root 的 可视视口（visual viewport）的宽度，不包括任何滚动条。

6. 令 rootHeight 为 root 的 可视视口的高度，不包括任何滚动条。

7. 如果 size 等于 rootWidth 乘以 rootHeight，则返回 null。

8. 如果 imageRequest 不为 null，执行以下步骤以调整图片位置和放大：

   1. 如果 imageRequest 的 响应（response）的内容长度（字节）小于 size * 0.004，则返回 null。

      注意： 这个启发式方法测试图片资源是否包含足够的数据，足以让用户感知为内容。它比对了传输文件大小和实际显示像素的数量（解码与缩放后）。极少字节但像素很多的图片一般为低内容的背景、渐变等，因此不会作为 LCP 候选。

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

   3. 令 visibleDimensions 为 concreteDimensions，经 object-position 或 background-position 以及 element 的 内容盒（content box） 调整后的位置。

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

   4. 令 clientContentRect 为包含 visibleDimensions 且应用 element 的 变换（transforms） 后的最小 DOMRectReadOnly。

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

   6. 将 width 设为 intersectingClientContentRect 的 width， 向上取整。

   7. 将 height 设为 intersectingClientContentRect 的 height， 向上取整。

   8. 将 size 设为 width * height。

      注意： 这样可以确保我们只和图片本身相交，不和元素的装饰（decorations）相交。

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

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

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

   12. 令 scaleFactor 为 boundingClientArea / naturalArea。

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

9. 返回一个 有效可视尺寸结果，其 size 设置为 size，width 设置为 width， height 设置为 height。

输入

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

paintTimingInfo，一个 绘制时序信息（paint timing info）

document，一个 Document

输出

无

1. 将 document 的 最大内容绘制面积 设置为 candidate 的 面积。

2. 将 document 的 最大内容绘制宽度 设置为 candidate 的 宽度。

3. 将 document 的 最大内容绘制高度 设置为 candidate 的 高度。

4. 令 url 为空字符串。

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

6. 令 entry 为新的 LargestContentfulPaint 实例，使用 document 的 相关领域（relevant realm），其 绘制时序信息 是 paintTimingInfo，并带有如下属性：

   • size 设为 candidate 的 面积，

   • url 设为 url，

   • id 设为 candidate 的 element 的 element id，

   • loadTime 设为 candidate 的 loadTime，

   • 以及 element 设为 candidate 的 element。

7. 将 PerformanceEntry entry 入队。