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

如何解决为什么我的网站滚动看起来滞后 onscroll

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

Social Reroute

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

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

这是灯塔所说的，

解决方法

下面我展示了一个使用 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>