揭秘懒加载的黑科技！提升前端性能，让你的网站飞起来！

前端

2023-09-23 19:31:31

懒加载：优化前端性能的利器

白屏时间

作为前端开发人员，您应该熟悉白屏时间这个概念。它是指用户访问您的网站时，从点击链接到看到页面内容所经历的时间。白屏时间越长，用户体验就越差。

懒加载的概念

懒加载是一种减少白屏时间的有效技术。它的原理很简单：只加载当前视口中可见的内容，其他内容在用户滚动页面时再加载。这样可以减少初始加载时需要加载的内容数量，从而降低白屏时间。

懒加载的应用场景

懒加载不仅适用于图片，还可以用于其他资源的加载，如视频、音频、脚本、样式表等。只要需要加载的资源都可以采用懒加载技术。

懒加载的实现

图片懒加载

图片懒加载是最常见的懒加载方式。可以通过多种方式实现，例如使用 <img> 标签的 loading 属性或使用第三方库。

视频懒加载

视频懒加载与图片懒加载类似，但需要考虑更多因素，如自动播放和预加载。

音频懒加载

音频懒加载与视频懒加载类似，但需要考虑更多因素，如自动播放和预加载。

脚本懒加载

脚本懒加载是指只在需要时加载脚本。这可以减少初始加载时需要加载的资源数量，从而降低白屏时间。

样式表懒加载

样式表懒加载是指只在需要时加载样式表。这可以减少初始加载时需要加载的资源数量，从而降低白屏时间。

懒加载的代码示例

使用 <img> 标签的 loading 属性实现图片懒加载

<img src="image.jpg" loading="lazy">

使用第三方库实现图片懒加载

const images = document.querySelectorAll('img[loading="lazy"]');
images.forEach((image) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        image.src = image.dataset.src;
        observer.unobserve(image);
      }
    });
  });
  observer.observe(image);
});

使用第三方库实现视频懒加载

const videos = document.querySelectorAll('video[loading="lazy"]');
videos.forEach((video) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        video.src = video.dataset.src;
        video.play();
        observer.unobserve(video);
      }
    });
  });
  observer.observe(video);
});

使用第三方库实现音频懒加载

const audios = document.querySelectorAll('audio[loading="lazy"]');
audios.forEach((audio) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        audio.src = audio.dataset.src;
        audio.play();
        observer.unobserve(audio);
      }
    });
  });
  observer.observe(audio);
});

使用第三方库实现脚本懒加载

const scripts = document.querySelectorAll('script[loading="lazy"]');
scripts.forEach((script) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        script.src = script.dataset.src;
        observer.unobserve(script);
      }
    });
  });
  observer.observe(script);
});

使用第三方库实现样式表懒加载

const stylesheets = document.querySelectorAll('link[rel="stylesheet"][loading="lazy"]');
stylesheets.forEach((stylesheet) => {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        stylesheet.href = stylesheet.dataset.href;
        observer.unobserve(stylesheet);
      }
    });
  });
  observer.observe(stylesheet);
});