累积布局移位和jquery答案

【问题标题】：cumulative layout shift and jquery累积布局移位和jquery
【发布时间】：2021-05-28 01:21:02
【问题描述】：

我正在使用 materialize css 0.100.2 并且一直在我的网站上查看 CLS，我发现问题是这段代码：

$(window).resize(function() {
      $('.lt-slider').height($(window).height() + 15).css('position', 'relative');
  });

使用此代码，如果我将其删除为 0.039，我的 CLS 为 1.13，但我松开了一大块屏幕，因此内容消失在滑块后面是否有解决方案来保留内容并减少 CLS。

【问题讨论】：

您是否有 HTML 代码以便我可以检查发生的情况，我认为您应该在父级上为这个重新调整大小腾出空间
有很多html代码如果我给你链接到网站link可能会更容易@

标签： jquery lighthouse core-web-vitals

【解决方案1】：

据我所知，我一直在深入挖掘我的问题，这与 Materialize CSS 和 jquery 版本有关。我已经尝试过 .097 0.100.2 和 1.00 都具有相同的结果，如果我使用 jquery 2.2.4，CLS 为 0.4，但如果我使用 jquery 3 及更高版本，CLS 会上升到 1.4，但如果我使用物化 CSS 版本 1 并使用javascript CLS 下降，我可以使用上面的方法减少到 0

【讨论】：

【解决方案2】：

我发现这是 gerald 发布的：

首先，创建一个“antiCls”类并将其添加到您的自定义 CSS（在 HEAD 元素中），如下所示：

.antiCls { 
    visibility: hidden;
}

然后使用这段 javascript：

var cls = document.getElementsByClassName('antiCls'),
    i = cls.length;
    
for (i = 0; i < cls.length; i++) {
    cls[i].style.visibility = "visible";
    }

然后我将类添加到灯塔中受“避免大的布局变化”影响的每个元素中，您可能需要测试应用了 antiCls 类的每个元素，但它确实有效

【讨论】：

我根据这个答案使用了类似的非 JS 方法，标题画得很好并且没有产生 CLS，虽然主要是可悲的是（没有真正显示转变或转变对用户可见）所以我有点走投无路，我通过内联样式将可见性隐藏在最大的 CLS 原因上，然后在大型非关键 CSS 的 end 处将其设置回可见。从 Lighthouse 的 1.8 的 CLS 到 0.021 的分数