为什么我的网站滚动看起来滞后

Question

我知道有很多关于这个主题的帖子，我已经浏览了其中的很多。我已经尝试了很多人们建议的不同优化。似乎没有任何效果。我进行了 Lighthouse 性能检查，并尽可能多地提出建议，而不会过多地影响 image/video 分辨率。但是，我的网站在滚动时似乎有点滞后，有时会跳过很多像素。不知道是什么原因。我确实有一个 onscroll 侦听器，我尝试对其进行去抖动或完全删除，但仍然没有显着差异。欢迎任何建议。

Social Reroute

注意：请不要将此标记为重复，我知道它看起来与其他帖子相似。但是 none 对我有帮助，我会继续寻找。

这是一个普通的静态网站，因此所有代码都应该到达您的浏览器。如果没有，请随时询问代码部分。

Lighthouse 是这么说的，

Answer 1

下面我展示了一个使用 API IntersectionObserver 的示例，它极大地帮助加快了页面加载速度。它们还可以用于运行电影或加载页面元素。我也推荐阅读这篇文章content-visibility，当然，它目前只在基于chromium的那些浏览器中有效，但是一个非常有趣的选项，也显着提高了页面速度。

(function() {
  var observer = new IntersectionObserver(onIntersect);
  document.querySelectorAll('[data-lazy-load]').forEach(function(img) {
    observer.observe(img);
  });

  function onIntersect(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.target.getAttribute('data-processed') || !entry.isIntersecting) return true;
      entry.target.setAttribute('src', entry.target.getAttribute('data-src'));
      entry.target.setAttribute('data-processed', true);
    });
  }
})();

:root {
  font-size: 16px;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 1rem;
  padding: 1rem;
}

img {
  width: 100%;
}

<div class="container">
  <img src="https://fakeimg.pl/300/" data-src="https://source.unsplash.com/random/500x500" data-lazy-load />
  <img src="https://fakeimg.pl/300/" data-src="https://source.unsplash.com/random/500x502" data-lazy-load />
  <img src="https://fakeimg.pl/300/" data-src="https://source.unsplash.com/random/500x504" data-lazy-load />
  <img src="https://fakeimg.pl/300/" data-src="https://source.unsplash.com/random/500x506" data-lazy-load />

</div>

为什么我的网站滚动看起来滞后

Why my website scroll seem laggy onscroll

html

javascript

css

onscroll