问题描述
我们是向客户网站添加组件/用户界面元素的第 3 方供应商。我们有时会在运行时根据上下文参数或作为 A/B 测试的一部分隐藏/更改此容器的大小。
在我们拥有所有上下文数据之前，网站所有者不可能知道元素的最终大小，因此无法在服务器端设置高度。
为了尽量减少对 CLS 的影响，网站所有者可以为容器设置初始高度，但这有两个问题：
消除此类元素的 CLS 影响的推荐方法是什么？
解决方法
我们有时会根据上下文参数或作为 A/B 测试的一部分在运行时隐藏/更改此容器的大小。
任何时候您在运行时更改内容的大小，都有可能会移动页面上的其他内容，这可能会对使用体验产生负面影响。在您花费大量时间尝试为您的用例“修复”CLS 之前，您可能需要考虑您的用例是否为用户提供了正确的体验。
如果您无法更改系统，而只想尽量减少其对 CLS 的影响，这里有一些选项：
- 仅在 用户输入后才折叠区域（可能要求用户关闭容器，或者等待页面重新布局的其他预期原因）。
- 仅当所有受影响的内容都在视口之外时才折叠。听起来你已经为低于倍数这样做了吗？对于首屏内容，您可以同时移除内容并以完全相同的量调整滚动位置。
而且，也许一些更广泛的替代方案是：
- 不要折叠该区域，而是将其替换为一些不会失败的默认内容。
- 可能不是一个选项，但也许有办法延迟显示内容，直到您知道是否需要条件内容？这取决于加载内容的延迟时间，如果您无法快速回答成功测试，则会对加载性能产生负面影响...