从0开始学习JavaScript--JavaScript 懒加载和预加载

懒加载和预加载是前端性能优化中的两大利器，它们可以显著改善页面加载速度和用户体验。本文将深入探讨懒加载和预加载的核心概念、实现方式以及在实际应用中的丰富示例。

懒加载（Lazy Loading）的基本概念

懒加载是指在页面初次加载时，只加载当前视窗内可见区域的内容，而延迟加载其他部分，直到用户滚动页面或触发特定事件时再加载。这种方式有效减少初始页面加载时间，提高用户体验。

1. 图片懒加载

图片懒加载是懒加载的经典应用之一。通过将图片的 src 属性设置为占位符或空字符串，再通过 JavaScript 动态设置真实图片地址，实现图片在需要时才加载的效果。

<img data-src="lazy-image.jpg" alt="Lazy-loaded Image" class="lazy-image">

document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('.lazy-image');

  const lazyLoad = function() {
    lazyImages.forEach(image => {
      if (image.getBoundingClientRect().top < window.innerHeight && !image.src) {
        image.src = image.dataset.src;
      }
    });
  };

  document.addEventListener('scroll', lazyLoad);
  window.addEventListener('resize', lazyLoad);
});

2. 懒加载框架

懒加载框架如 Intersection Observer 提供了更灵活的方式来监测元素是否进入视窗。

document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('.lazy-image');

  const lazyLoad = function(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const image = entry.target;
        image.src = image.dataset.src;
        observer.unobserve(image);
      }
    });
  };

  const observer = new IntersectionObserver(lazyLoad, { rootMargin: '0px 0px 200px 0px' });

  lazyImages.forEach(image => observer.observe(image));
});

预加载（Preloading）的基本概念

预加载是指在用户实际需要资源之前提前加载这些资源，以缩短用户等待时间。这种方式适用于预测用户行为，提前加载可能会用到的资源。

1. 图片预加载

图片预加载可以通过创建 Image 对象，并设置 src 属性来实现。这样在用户需要查看图片时，已经在缓存中加载完成，提升用户体验。

const image = new Image();
image.src = 'preloaded-image.jpg';

2. 预加载整个页面

预加载整个页面的所有资源，包括样式表、脚本和图片，以确保在用户进行导航时，所需的资源已经在缓存中。

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="script.js" as="script">
<link rel="preload" href="preloaded-image.jpg" as="image">

懒加载和预加载的综合应用

实际应用中，懒加载和预加载常常结合使用，以最大程度地提高页面性能。例如，在一个包含很多图片的页面中，可以使用懒加载确保仅加载当前可见区域的图片，同时使用预加载提前加载下一屏可能需要的图片。

<img data-src="lazy-image1.jpg" alt="Lazy-loaded Image 1" class="lazy-image">
<img data-src="lazy-image2.jpg" alt="Lazy-loaded Image 2" class="lazy-image">
<!-- more lazy images -->

<link rel="preload" href="next-page-image1.jpg" as="image">
<link rel="preload" href="next-page-image2.jpg" as="image">
<!-- more preloaded images -->

<script>
  // Lazy loading logic
  // ...

  // Preloading logic
  const preloadedImages = ['next-page-image1.jpg', 'next-page-image2.jpg'];
  preloadedImages.forEach(src => {
    const image = new Image();
    image.src = src;
  });
</script>

懒加载和预加载的高级应用

1. 图片懒加载的渐进式加载

渐进式加载是一种更高级的图片加载技术，它允许图片在加载时按照分辨率逐步清晰显示，提升用户感知体验。

<img
  data-src="image-500.jpg"
  data-srcset="image-500.jpg 500w,
               image-800.jpg 800w,
               image-1200.jpg 1200w"
  sizes="(max-width: 500px) 100vw, (max-width: 800px) 80vw, 1200px"
  alt="Progressive Lazy-loaded Image"
  class="lazy-image"
/>

document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('.lazy-image');

  const lazyLoad = function(entries) {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const image = entry.target;
        image.srcset = image.dataset.srcset;
        image.src = image.dataset.src;
        observer.unobserve(image);
      }
    });
  };

  const observer = new IntersectionObserver(lazyLoad, { rootMargin: '0px 0px 200px 0px' });

  lazyImages.forEach(image => observer.observe(image));
});

2. 动态资源加载

在某些情况下，页面上的资源可能是动态生成的，这时可以使用动态加载的方式，根据用户行为或特定条件加载所需资源。

const button = document.getElementById('load-button');

button.addEventListener('click', function() {
  // 动态加载脚本
  const script = document.createElement('script');
  script.src = 'dynamic-script.js';
  document.body.appendChild(script);

  // 动态加载样式表
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'dynamic-style.css';
  document.head.appendChild(link);

  // 动态加载图片
  const image = new Image();
  image.src = 'dynamic-image.jpg';
  document.body.appendChild(image);
});

3. 预加载字体

在某些项目中，使用了特定的字体，为了避免在用户浏览时才加载字体而导致 FOUC（Flash Of Unstyled Content），可以使用预加载字体。

<link rel="preload" href="custom-font.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<style>
  body {
    font-family: 'CustomFont', sans-serif;
  }
</style>