什么是懒加载？

懒加载 (Lazy Loading) 是一种优化技术，用于延迟加载资源（如图片、脚本、模块等），直到它们真正被需要时（例如进入可视区域或被触发）才加载，从而提升网页性能和用户体验。

原理

核心原理是通过判断资源何时进入视口（或称可视区域），动态加载资源：

• 在资源未激活时使用 placeholder 属性储存路径（如图片的 data-src）。
• 使用 JavaScript 检测元素位置（如滚动事件或 Intersection Observer API），触发加载后通过代码更新 src 或其他真实路径。
  示例代码使用 Intersection Observer API：

  document.addEventListener("DOMContentLoaded", function() {
  const imgElements = document.querySelectorAll('img[data-src]');
    
  imgElements.forEach(img => {
    img.setAttribute('src', ''); // 清空 src
    const observer = new IntersectionObserver((entries, observer) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          img.src = img.dataset.src; // 当进入可视区时加载
          observer.unobserve(entry.target);
        }
      });
    }, { threshold: 0.1 }); // 定义触发的可视比例
      
    observer.observe(img);
  });
  });
  

  在框架应用中实现时：

• React 使用 React.lazy 和 Suspense 按需渲染组件。
• Webpack 结合动态导入语法（如 import()）生成分割代码块。

应用场景

• 图片与媒体资源懒加载：适用于多图片网站（如相册、电商页面），仅在用户滚动到图片时才加载。
• 脚本与模块懒加载：非关键功能脚本被触发后加载（例如事件处理函数绑定时）。
• 组件懒加载：在单页应用中延迟初始化特定组件。
• 避免场景：若完整内容需优先用于完整导航（如网站地图）则不适用懒加载。

核心优点

• 性能提升：减少初始页面加载时间与资源体积，加速首屏渲染（通过只加载可见部分）。
• 资源节约：节省带宽成本并降低服务器负载。
• 用户体验优化：缩短等待时间，确保关键内容优先呈现。潜在问题如 SEO 索引受阻在合理实施可控。

什么是懒加载?
加速你的网站:一文看懂预加载和懒加载
懒加载详解
Webpack Code Splitting:动态加载与懒加载
懒加载的基本原理与实现
Web性能优化中的懒加载图像和媒体资源技术及其最佳实践