从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>

懒加载和预加载的性能优化

1. 资源合并： 将多个小图片合并成雪碧图，或将多个小样式表和脚本合并成一个文件，减少请求次数。
2. 资源压缩： 对图片、样式表、脚本等进行压缩，减小文件大小，提高加载速度。
3. CDN 加速： 使用内容分发网络（CDN）来加速资源的加载，将资源分布到全球各地的节点，提高访问速度。

总结

懒加载和预加载是前端性能优化的关键策略之一，通过巧妙地加载资源，提高了页面加载速度和用户体验。本文深入研究了懒加载和预加载的高级应用，包括图片懒加载的渐进式加载、动态资源加载、预加载字体等方面。

在实际应用中，需要根据项目的具体情况选择适当的加载策略，并结合其他性能优化手段，如资源合并、资源压缩、CDN 加速等，以达到最佳的性能效果。

希望本文可以让大家在前端项目中更加全面地应用懒加载和预加载提供了有益的指导。