为什么我的网站滚动似乎滞后 onscroll答案

【问题标题】：Why my website scroll seem laggy onscroll为什么我的网站滚动似乎滞后 onscroll
【发布时间】：2021-04-11 17:47:28
【问题描述】：

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

Social Reroute

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

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

这是灯塔所说的，

【问题讨论】：

你的代码在哪里？是您链接的网站吗？
@enhzflep 是的，它是一个静态网站。所有代码都应该在那里
你说的好，我应该在 OP 中提到这一点。
@enhzflep 我认为我将该视频优化为 16MB，除非您使用的是 Safari。因为 Safari 好像不支持 WebM 格式。
@HafizTemuri 如果有人不想向下滚动到branded-video 部分，那么为什么要加载那些8 视频，这只是效率低下，这就是延迟加载的原因。

标签： javascript html css onscroll

【解决方案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>

【讨论】：