测量累积布局偏移的新方法
New way of measuring Cumulative Layout Shift
Google 推出了一种测量累积布局偏移 (CLS) 的新方法。但不知何故，我无法从 web.dev and https://web.dev/evolving-cls/.
上的文章中理解新定义
谁能用简单的话帮我理解一下？或推荐任何文章或视频？
简单的答案是它用于在页面的整个生命周期中累积，但现在将其分批为“windows”并报告最差的window。
让我们以无限滚动页面（即当您向下滚动页面时加载越来越多的内容 - 如 Twitter 提要或 Facebook 提要）或单页应用程序 (SPA) 为例。
当您停留在一页上时（即使在 SPA 的情况下它看起来像不同的页面），如果您有任何 shift-inducing 元素，您的 CLS 过去会继续增长和增长。它可以增长到多大是没有限制的。
假设在无限滚动页面中，每个新元素都加载了 HTML 中没有 width 和 height 的图片（这将允许浏览器布局所需的 space 在图像下载之前）。因此，插入的每个新块都会向页面添加少量 CLS。如果您在该页面上停留的时间足够长，您最终将超过“良好”CLS 的限制，并且即使每次轮班相对较小，该页面也会表现不佳。
当然，您可以通过确保在滚动到该区域之前加载内容，或通过保留 space（例如，为每个注入的图像添加宽度和高度属性）来防止任何偏移内容），但要获得 0 CLS 是困难的（不是不可能，而是困难！）并且页面的寿命越长，引入一些额外 CLS 的可能性就越大，这些总和超过限制的可能性就越大。
类似地，如果您有一个包含 5 个虚拟页面的 SPA（例如结帐应用程序），那么每个页面转换都可能引入一些 CLS。然而，如果您将其编码为 5 个独立的服务器端生成页面，您将在每次转换时重置 CLS 预算。仅仅因为你选择的技术而惩罚你似乎不公平，如果两者的用户体验相同，对吗？
现在应该注意，用户交互允许忽略 CLS 的一小段时间。例如，如果您单击“显示更多详细信息”按钮，它会展开一些隐藏的内容，那么用户当然希望这种转变，所以它不算数。因此，可以将 SPA 编码为零 CLS，但正如我所说，对于这些长期存在的页面来说，这更有可能成为一个问题。
因此，新的 CLS 定义所说的不是让整个 CLS 仅在“window”时间内使用最差的 CLS 块。现在这个块可能仍然是几个 CLS 项目的结果（所以它仍然是“累积的”而不是测量最差的 CLS 项目）但它限制了它。
因此，如果在页面加载时您获得 0.05、0.025 和 0.024 的 CLS，然后暂停，然后很晚之后又获得 0.04 的另一个 CLS，那么您可能有两个 CLS windows：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（下一个最大 window）。所以会让人觉得你在追自己的尾巴！但是，如果您报告最差的 CLS 元素，然后对其进行优化，然后找到下一个元素并继续，那么这与之前的情况类似。
最终我认为这是一个很好的改进，使 CLS 限制更容易满足并奖励进步。对于长期存在的页面来说，这是必要的更改。
Google 推出了一种测量累积布局偏移 (CLS) 的新方法。但不知何故，我无法从 web.dev and https://web.dev/evolving-cls/.
上的文章中理解新定义谁能用简单的话帮我理解一下？或推荐任何文章或视频？
简单的答案是它用于在页面的整个生命周期中累积，但现在将其分批为“windows”并报告最差的window。
让我们以无限滚动页面（即当您向下滚动页面时加载越来越多的内容 - 如 Twitter 提要或 Facebook 提要）或单页应用程序 (SPA) 为例。
当您停留在一页上时（即使在 SPA 的情况下它看起来像不同的页面），如果您有任何 shift-inducing 元素，您的 CLS 过去会继续增长和增长。它可以增长到多大是没有限制的。
假设在无限滚动页面中，每个新元素都加载了 HTML 中没有 width 和 height 的图片（这将允许浏览器布局所需的 space 在图像下载之前）。因此，插入的每个新块都会向页面添加少量 CLS。如果您在该页面上停留的时间足够长，您最终将超过“良好”CLS 的限制，并且即使每次轮班相对较小，该页面也会表现不佳。
当然，您可以通过确保在滚动到该区域之前加载内容，或通过保留 space（例如，为每个注入的图像添加宽度和高度属性）来防止任何偏移内容），但要获得 0 CLS 是困难的（不是不可能，而是困难！）并且页面的寿命越长，引入一些额外 CLS 的可能性就越大，这些总和超过限制的可能性就越大。
类似地，如果您有一个包含 5 个虚拟页面的 SPA（例如结帐应用程序），那么每个页面转换都可能引入一些 CLS。然而，如果您将其编码为 5 个独立的服务器端生成页面，您将在每次转换时重置 CLS 预算。仅仅因为你选择的技术而惩罚你似乎不公平，如果两者的用户体验相同，对吗？
现在应该注意，用户交互允许忽略 CLS 的一小段时间。例如，如果您单击“显示更多详细信息”按钮，它会展开一些隐藏的内容，那么用户当然希望这种转变，所以它不算数。因此，可以将 SPA 编码为零 CLS，但正如我所说，对于这些长期存在的页面来说，这更有可能成为一个问题。
因此，新的 CLS 定义所说的不是让整个 CLS 仅在“window”时间内使用最差的 CLS 块。现在这个块可能仍然是几个 CLS 项目的结果（所以它仍然是“累积的”而不是测量最差的 CLS 项目）但它限制了它。
因此，如果在页面加载时您获得 0.05、0.025 和 0.024 的 CLS，然后暂停，然后很晚之后又获得 0.04 的另一个 CLS，那么您可能有两个 CLS windows：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（下一个最大 window）。所以会让人觉得你在追自己的尾巴！但是，如果您报告最差的 CLS 元素，然后对其进行优化，然后找到下一个元素并继续，那么这与之前的情况类似。
最终我认为这是一个很好的改进，使 CLS 限制更容易满足并奖励进步。对于长期存在的页面来说，这是必要的更改。