懒加载：让网页加载像点外卖一样“按需到菜”

想象一下，打开一个新页面，不是把整桌菜端上来，而是只在需要的那一刻端出关键菜品，既省时又不折腾。网页加载也是一样，用好懒加载（Lazy Loading）能让你的页面更轻快、更友好。

为什么需要懒加载

在信息爆炸的今天，用户盯着页面的时间越来越短。页面越重、越慢，用户留存和跳出率就越受影响。懒加载不是让你的页面“隐身”，而是让非关键资源“后上桌”，在可视区域真正需要时才加载，从而减少初始请求、减少首屏资源体积，提升首屏速度与可感知性能。

在哪些场景最有效

• 首屏需要加载大量图片的新闻或电商页
• 动态加载分页或无限滚动的列表页
• 包含大量背景图或大图装饰的页面
• 需要动态获取资源但又不希望一开始就拉满所有缓存的场景

实战要点：怎么用更顺手

1) 用Intersection Observer做条件加载

别再依赖“自然滚动到元素”的旧式事件了，Intersection Observer可以更精确地控制“何时加载”。关键在于设定合适的阈值和根边界，让图片或组件在进入可视区域的边缘时才加载。

<img src="placeholder.jpg" data-src="large-image.jpg" loading="lazy" 
     data-srcset="placeholder.jpg, large-image.jpg" 
     alt="示例图片" 
     class="lazy">

.lazy {
  opacity: 0;
  transition: opacity 0.3s ease;
}

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.srcSet = img.dataset.srcset;
      img.onload = () => {
        img.classList.remove('lazy');
      };
    }
  });
}, {
  root: null,
  threshold: 0.1
});

document.querySelectorAll('.lazy').forEach(img => {
  observer.observe(img);
});

2) 列表的“分批加载”策略

在列表页中，让“当前可视的条目”优先加载，超过一定偏移才继续加载下一批，能显著降低初始请求量。可以配合可视区域高度与滚动事件，只加载当前视窗高度的1.5倍范围内的内容。

3) 压缩与懒加载的配合

懒加载能减少请求，但图片体积仍会影响速度。结合服务端或构建工具对图片进行按需压缩，在不牺牲太多画质的前提下，把懒加载的资源体积再降下来。

4) 针对关键资源的“预加载优先”策略

首屏必现的图片或资源，优先预加载，保证关键信息的加载质量；其余则采用懒加载，实现“关键不掉帧，其他随用随来”。

评估与优化

懒加载的效果可以用LCP（ Largest Contentful Paint）指标衡量，LCP越早越好。建议在首屏加载阶段重点关注LCP，同时结合首屏资源体积、请求次数和时间线来持续优化。

结语

懒加载不是替代性能优化的全部，但却是让页面在用户刚打开时“更轻、更快、更友好”的一个好帮手。通过策略性地延迟非关键资源的加载，并在合适的时候按需“端上”它们，你就能让网页的加载体验像点外卖一样，既高效又不打扰。