如何测量首屏油漆？

Question

Web Vitals 具有两个众所周知的指标：FCP 和 LCP。测量绘画时间是个好主意。但我有不同的问题。

我必须实现一个指标来描述第一个屏幕何时完全加载到视口中。这意味着我需要测量最少的时间：

要么身体高度大于视口高度，要么文档已完成

我的第一次尝试如下：

设置每 200 毫秒检查一次此条件的时间间隔。伪代码：

setInterval(() => {
  if (document.body.clientHeight > window.innerHeight || document.readyState === 'complete') {
    resolve(); // commit!
  }
}, 200);

但是这种方式有两个主要问题：

1. 由于 200ms 窗口，它不准确；
2. 不准确，因为

   setInterval

   不承诺在指定时间执行回调。

第二种方法是使用

MutationObserver

。伪代码：

new MutationObserver(() => {
  if (document.body.clientHeight > window.innerHeight || document.readyState === 'complete') {
    resolve(); // commit!
  }
}).observe(document.body, {attributes: false, childList: true, subtree: true});

这很好，解决了这个问题，但是有一个很大的问题。这样就需要在每次 HTML 提交时重新计算窗口高度。来自服务器的包含大量 HTML 块的页面存在问题。

当第一次绘制和第一次脚本执行的资源非常重要时，这个解决方案对于测量第一次屏幕绘制来说变得不相关。

我的问题是如何以最小的性能成本和足够的准确性来衡量首屏绘制指标？

也许有一个我不知道的 API :)

Answer 1

衡量“第一屏幕”的唯一指标是速度指数，但这是一个复杂的、资源密集型的、需要在实验室外计算的复杂指标，不建议在现场测量。

除此之外，网站并不能真正在全屏上运行（“没有折叠”），也不是静态的，因为新内容通常会不断加载（想想社交媒体源更新、广告加载、通知关闭），所以有不是真正衡量页面何时停止更新。此外，如果“第一页”完全呈现，然后一个小通知图标发生变化，或者播放广告，或者轮播自动移动，那么应该何时测量。

我也不明白为什么你认为测量客户端高度/宽度是一个很好的衡量标准。屏幕下方的某些内容存在并不意味着屏幕上方的内容是完整的。

这就是为什么指标已从“首次绘制”（FP - 测量任何绘制）、“首次内容绘制”（FCP - 排除非内容绘制，例如背景颜色）和“最大内容绘制”（LCP - 试图成为一个衡量最大的内容，因此也可能是最重要的内容）。

如果您想测量特定内容的渲染时间，那么Element Timing（LCP 的基础）是一个值得关注的 API。 FCP 和 LCP 的区别在于，作为页面所有者，您可以决定测量哪个元素。