我得到了一个低的CLS（布局移位）分数在谷歌页面速度测试，我想这是因为如何我的滑块负载。当页面加载时（主要是在慢速连接上），滑块的图像都被加载到彼此下方，当页面加载完毕，javascript加载完毕时，其馀的图像才被隐藏并开始滑动。
我从一个教程中创建了下面的滑块。我不知道如何解决这个问题。我认为最好的方法是尝试隐藏所有其他图像（除了第一个），直到加载javascript。有没有用JavaScript实现这一点的方法？还是有更好的解决办法
处理这个问题的最佳方法是什么？下面是我的滑块代码:
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("single-slide");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
slides[slideIndex-1].style.display = "block";
setTimeout(showSlides, 6000);
}
您必须将display:none作为块的默认设置，例如使用css类。如果javascript位于页面末尾（应该如此），浏览器将在您从javascript中输入display:none之前开始加载图像
因此，您在处理“滑块”的方式上有一些问题（从目前显示的代码来看，这不是一个滑块，而是一个接一个地显示图像）。
第一个是在初始页面加载时，正如您所确定的那样。
所有的图像都将被加载，然后随着它们相互叠加，最终移动页面。
最简单的解决方案是在中使用一些内联css，以隐藏所有滑块图像。
<head>
<style>
.single-slide{display: none}
</style>
</head>
它必须是内联的，否则CSS可能应用得太晚，您的幻灯片仍然会显示。
然后根据需要将它们隐藏起来，就像你现在做的那样。
这就引入了另一个问题。
当你的第一张幻灯片载入时会发生什么？然后图像就会出现，你会得到一个巨大的布局变化。
将幻灯片添加到页面时的布局偏移。
解决这个问题的方法也很简单。您需要在包装器中显示图像，在包装器中您可以定义大小并添加overflow:hidder，以确保如果图像没有正确的比例，大小不会更改。
同样，这需要内联定义，否则包装器将以0的高度和宽度开始，然后在CSS加载时使页面跳转。
因此您的页面大致如下所示:
<html>
<head>
<style>
.single-slide{
display: none
}
.wrapper{
width: 100%;
height: 600px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="wrapper">
<img class="single-slide"/>
<img class="single-slide"/>
</div>
</body>
</html>
用你当前的滑块隐藏所有的图像，然后添加新的一个，在一个较慢的设备上，这可能结束了一个非常短的时间没有图像显示。
现在，如果您按照建议在页面上放置一个固定大小的包装器，CLS将不会受到影响，但是用户体验不会很好。
相反，将新图像添加到顶部，然后隐藏所有其他图像，这将确保没有白色闪烁。
