Php CLS-避免大的布局变化-HTML中的Div

正如我们大多数人所看到的，GTMetrix中有一个名为CLS的“半新”扫描。我正处于学习解决这些问题的开始阶段，我真的需要一个值得一试的例子（我相信这也能帮助成千上万的人寻找更丰富的教程）

该网址为：

GT Metrix的内容如下：

我曾尝试将宽度和高度变量添加到，但没有解决方案。我确信解决方案超出了这一范围。有人能告诉我（和其他人）采取什么直观的步骤来解决与地点有关的问题吗。我读过其他关于这个过程的文章，但我想找一个人对人的解释

---

更新：如果我删除css的“预加载”，CLS将下降到0.16（但仍然是相同的元素）

以下是

的一部分：

内联CSS是解决此问题的关键，所发生的是加载内联CSS并呈现页面，然后加载其他CSS、组件等并更改页面布局。例如，我猜您的“天气小部件”会导致布局改变，因为它是使用角度渲染的，如果您为该项目定义了固定的高度和宽度，那么将解决该问题。您的幻灯片似乎也会导致布局发生变化，这似乎是因为滑块高度由JavaScriptRight设置，因此这里是一个示例，您有一个高度为100%的div。然后在该div中添加一段，高度将发生变化。高度100%并不意味着什么，除非有一个容器可以容纳它，并且您具有正确的显示属性。现在，如果你把这个高度设为1000px，这足以容纳所有的东西，那么布局就不会改变。显然，设置固定高度是不可行的，因此我们要做的是确保折叠上方显示的所有元素都可以计算其高度和宽度。在您的天气小部件示例中，根据我所知，这似乎是通过AJAX加载的（或者从角度JS计算需要一段时间），因此，当加载时，我们需要已经在页面上为其分配了空间（因此您需要为该项目指定一个固定的高度）。下载初始页面HTML时，浏览器不能说“此小部件将达到150px高”，因为它还没有所有HTML/SVG。您可以在中设置项目动画，这不是问题，但是需要计算它们的末端位置并为其分配空间。是的，因此对于稍后加载的项目，您需要手动为其分配空间（将其视为“占位符空间”）。对于初始页面HTML中的任何内容，您只需要确保关键CSS中有足够的信息来计算布局。另一个例子是您拥有的滑块，它似乎通过JavaScript调整高度以匹配图像。这将导致项目略微增长（或收缩），并导致布局发生轻微变化。我看到一些不同的项目，因为我有一个大屏幕。列表中的两项是容器，因此它们显然会大量移动。