谷歌推出了一种测量累积布局偏移 (CLS) 的新方法。但不知何故，我无法从web.dev和https://web.dev/evolving-cls/上的文章中理解新定义。
任何人都可以用简单的话帮助我理解这一点吗？或建议任何文章或视频？
问问题
132 次
1 回答
2
简单的答案是它曾经在页面的整个生命周期内累积，但现在将它分批成“窗口”并报告最差的窗口。
让我们以无限滚动页面（即，当您向下滚动页面时加载越来越多的内容——如 Twitter 提要或 Facebook 提要）或单页应用程序 (SPA) 为例。
当您停留在一个页面上时（即使它在 SPA 的情况下看起来像不同的页面），如果您有任何引起转变的元素，您的 CLS 会继续增长和增长。它可以增长到多大是没有限制的。
假设在无限滚动页面中，每个新元素都加载了一张没有HTMLwidth和heightHTML 的图片（这将允许浏览器在下载图片之前布局所需的空间）。因此，每个插入的新块都会向页面添加少量 CLS。如果您在该页面上停留的时间足够长，您最终将超过“良好”CLS 的限制，并且即使每个班次相对较小，该页面也会被视为表现不佳。
当然，您可以通过确保在滚动到该区域之前加载内容或通过保留空间（例如在每个注入的内容上添加该图像的宽度和高度属性）来防止任何变化，但是获得 0 CLS 是困难的（不是不可能，但很困难！）并且页面寿命越长，引入一些额外 CLS 的可能性就越大，这些总和超过限制的可能性就越大。
同样，如果您有一个带有 5 个虚拟页面的 SPA（例如一个结帐应用程序），那么每个页面转换都可能会引入一些 CLS。而如果您将其编码为 5 个单独的服务器端生成页面，您将在每次转换时重置 CLS 预算。仅仅因为您选择的技术而惩罚您似乎不公平，如果两者的用户体验相同，是否会这样做？
现在应该注意的是，用户交互允许忽略 CLS 的一小段时间。例如，如果您单击“显示更多详细信息”按钮，它会展开一些隐藏的内容，那么用户当然希望发生这种转变，因此它不会被计算在内。因此，可以将 SPA 编码为具有零 CLS，但正如我所说，对于这些长期存在的页面来说，它更有可能成为问题。
因此，新的 CLS 定义所说的不是让整个 CLS 只在一个“窗口”内使用最差的 CLS 块。现在，该块可能仍然是几个 CLS 项目的结果（因此它仍然是“累积的”，而不是衡量最差的 CLS 项目），但它限制了它。
因此，如果在页面加载时您获得 0.05 和 0.025 和 0.024 的 CLS，然后是暂停，然后是 0.04 的另一个 CLS，那么您可能有两个 CLS 窗口：一个是 0.099 (0.05 + 0.025 + 0.024)，另一个是 CLS 为 0.04 . CLS 将被报告为其中最差的（0.099），而在旧世界中，它会报告为总数（0.139）。这意味着在新定义中，您只需保持在“好”的 0.1 限制以下，而在旧世界中，您将进入“需要改进”类别。
理论上，每一页都应该具有完全相同的 CLS 或比以前更好，并且没有人应该为此更糟。因此，对于长期存在的页面来说，它被视为一个很好的改进，没有缺点。
但是，这确实意味着您可能隐藏了一些您不知道的 CLS。继续上面的示例，如果您修复页面加载 CLS 并将该 0.099 降至 0 并认为您一切正常，您可能会惊讶地看到您的 CLS 现在报告为 0.04（下一个最大窗口）。所以会让人有种追自己尾巴的感觉！但无论如何，如果您报告最差的 CLS 元素，然后对其进行优化，然后找到下一个元素并继续，这与以前类似。
最终，我认为这是一个很好的改进，使 CLS 限制更容易满足并奖励进步。对于长期存在的页面来说，这是必要的更改。
于 2021-07-08T13:21:46.870 回答