最大内容绘制

<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，执行如下步骤：

1. 对每个 record 属于 paintedImages：

   1. 令imageElement为 record 的element。

   2. 若imageElement未在 document 下对绘制计时透明暴露，则继续。

   3. 令request为record的request。

   4. 令 candidate 为 (imageElement, request)

   5. 令 intersectionRect 为交集矩形算法以 imageElement 为目标、以 viewport 为根返回的值。

   6. 可能添加 LargestContentfulPaint 条目，带 candidate、intersectionRect、paintTimingInfo、record 的loadTime 和 document。

2. 对每个 textNode 属于 paintedTextNodes，

   1. 若textNode未在document下对绘制计时透明暴露，则继续。

   2. 若textNode的α通道值 ≤0，或不透明度值 ≤0：

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

   3. 令 candidate 为 (textNode, null)

   4. 令 intersectionRect 为空矩形。

   5. 对每个 Text 节点 text 属于 textNode 的所拥有文本节点集合：

      1. 扩展 intersectionRect 为包含 text 和 intersectionRect 边框盒的最小矩形。

   6. 将 intersectionRect 与可视 viewport 做交集。

   7. 可能添加 LargestContentfulPaint 条目，带 candidate、intersectionRect、paintTimingInfo、0 和 document。

输入

intersectionRect，一个DOMRectReadOnly

imageRequest，一个Request

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。

9. 如果imageRequest不为null，则执行以下步骤以校正图片位置和放大：

   1. 令concreteDimensions为imageRequest在element中的具体对象尺寸。

   2. 令visibleDimensions为调整定位后的concreteDimensions，通过object-position或background-position和element的内容盒。

   注意： 其中某些算法在CSS中未严格定义。预期结果是获得element中图片实际位置和尺寸，返回DOMRectReadOnly。

   1. 令clientContentRect为应用element的变换后的visibleDimensions最小DOMRectReadOnly。

   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。

10. 返回size。

输入

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

intersectionRect，一个DOMRectReadOnly

paintTimingInfo，一个绘制计时信息

loadTime，一个DOMHighResTimestamp

document，一个文档

输出

无

1. 如果document的内容集合已包含candidate，则返回。

2. 添加candidate到document的内容集合

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

4. 如果window的已触发滚动事件或已触发输入事件为true，则返回。

5. 令size为以intersectionRect给定candidate的element的有效视觉尺寸。

6. 如果size小于等于document的最大内容绘制尺寸，返回。

7. 令url为空字符串。

8. 若candidate的request非null，则将url设为candidate的request的请求URL。

9. 令id为candidate的element的元素id。

10. 令contentInfo为一个映射，使contentInfo["size"] = size，contentInfo["url"] = url，contentInfo["id"] = id，contentInfo["loadTime"] = loadTime，contentInfo["element"] = candidate的element。

11. 创建LargestContentfulPaint条目，输入为contentInfo、paintTimingInfo和document。

输入

contentInfo，一个映射

paintTimingInfo，一个绘制计时信息

document，一个文档

输出

无

1. 将document的最大内容绘制尺寸设为contentInfo["size"]。

2. 令entry为新的LargestContentfulPaint条目，其使用document的相关realm，paint timing info为paintTimingInfo，并按如下设值：

   • size 为 contentInfo["size"]，

   • url为contentInfo["url"]，

   • id为contentInfo["id"]，

   • loadTime为contentInfo["loadTime"]，

   • 以及element为contentInfo["element"]。

3. 队列该PerformanceEntry entry。