测量累积布局偏移的新方法

如何解决测量累积布局偏移的新方法

Google 推出了一种衡量累积布局偏移 (CLS) 的新方法。但不知何故，我无法理解关于 web.dev 和 https://web.dev/evolving-cls/ 的文章中的新定义。

谁能帮我用简单的话来理解这个？或推荐任何文章或视频？

解决方法

简单的答案是它曾经在页面的整个生命周期中累积，但现在将其分批处理到“窗口”并报告最差的窗口。

让我们以无限滚动页面（即当您向下滚动页面时加载越来越多的内容 - 例如 Twitter 提要或 Facebook 提要）或单页应用 (SPA) 为例。

当您停留在一页上时（即使在 SPA 的情况下它看起来像不同的页面），如果您有任何引起转变的元素，您的 CLS 过去会继续增长和增长。它可以增长到多大没有限制。

假设在无限滚动页面中，每个新元素都加载了一张图片，而 HTML 中没有 width 和 height（这将允许浏览器在下载图像之前布局所需的空间）。因此，插入的每个新块都会向页面添加少量 CLS。如果您在该页面上停留的时间足够长，您最终将超过“良好”CLS 的限制，并且即使每个班次相对较小，该页面也会被视为表现不佳。

当然，您可以通过确保在滚动到该区域之前加载内容，或通过保留空间（例如，在每个注入的内容上为该图像添加宽度和高度属性）来防止任何移动，但获得 0 CLS 很难（并非不可能，而是很难！）并且页面的生命周期越长，就越有可能引入一些额外的 CLS，并且这些 CLS 的总数越有可能超过限制。

同样，如果您的 SPA 有 5 个虚拟页面（例如结帐应用程序），那么每个页面转换都可能引入一些 CLS。而如果您将其编码为 5 个单独的服务器端生成页面，您将在每次转换时重置 CLS 预算。仅仅因为您选择的技术而惩罚您似乎不公平，如果两者的用户体验相同吗？

现在应该注意的是，用户交互允许忽略 CLS 的一小段时间。例如，如果您单击“显示更多详细信息”按钮并展开一些隐藏的内容，那么用户当然期望这种转​​变，因此它不算数。因此，可以将 SPA 编码为具有零 CLS，但正如我所说，对于这些长期存在的页面来说，这更有可能成为问题。

因此，新的 CLS 定义所说的不是让整个 CLS 只在“时间窗口”内使用最差的 CLS 块。现在这个块可能仍然是几个 CLS 项目的结果（所以它仍然是“累积的”，而不是衡量最差的 CLS 项目），但它限制了它。

因此，如果在页面加载时获得 0.05 和 0.025 和 0.024 的 CLS，然后暂停，然后又是 0.04 的 CLS，那么您可能有两个 CLS 窗口：一个是 0.99 (0.05 + 0.025 + 0.024)，另一个是CLS 为 0.04。 CLS 将报告为这些中最差的 (0.099)，而在旧世界中，它将报告为总数 (0.139)。这意味着在新定义中，您只是保持在“好”的 0.1 限制之下，而在旧世界中，您将进入“需要改进”类别。

理论上，每一页都应该具有完全相同的 CLS 或比以前更好，没有人会因此更糟。因此，它被视为对长期存在的页面的一个很好的改进，没有任何缺点。

但这确实意味着您可能隐藏了一些您不知道的 CLS。继续上面的示例，如果您修复页面加载 CLS 并将该 0.99 降低到 0 并认为您一切正常，您可能会惊讶地看到您的 CLS 现在报告为 0.04（下一个最大的窗口）。所以可能会让人觉得你在追逐自己的尾巴！但无论如何，如果您报告最糟糕的 CLS 元素，然后对其进行优化，然后找到下一个元素并继续，那无论如何都与之前类似。

最终，我认为这是一个很好的改进，使 CLS 限制更容易满足并奖励进步。对于长期存在的页面，这是必要的更改。