懒加载与预加载

懒加载（Lazy Loading）和预加载（Preloading）是控制资源加载时机的两种核心策略：一个“按需加载”，一个“提前准备”。

1. 懒加载 Lazy Loading

1.1 什么是懒加载

• 页面初始只加载可视区域资源。
• 当资源即将进入视口时再触发加载。
• 常用于图片、视频、iframe、长列表等。

1.2 图片懒加载

原生 loading="lazy"：

<img src="placeholder.jpg" data-src="real.jpg" loading="lazy" alt="描述">

Intersection Observer 实现：

const imgs = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
imgs.forEach(img => observer.observe(img));

1.3 路由懒加载

在 Vue / React 中按需加载页面组件：

// Vue
const Home = () => import('./views/Home.vue');

// React
const Home = lazy(() => import('./pages/Home'));

1.4 懒加载优点

• 减少首屏请求数量。
• 降低首屏加载时间。
• 节省用户流量。

2. 预加载 Preloading

2.1 什么是预加载

• 在真正需要资源之前，提前发起请求。
• 让后续页面或操作更流畅。

2.2 预加载方式

方式	作用
<link rel="preload">	提前加载当前页面必需的关键资源
<link rel="prefetch">	预加载后续页面可能用到的资源（低优先级）
<link rel="preconnect">	提前建立 DNS、TCP、TLS 连接
<link rel="dns-prefetch">	提前解析域名

<!-- 预加载关键字体 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>

<!-- 预连接第三方域名 -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- 预加载下一页资源 -->
<link rel="prefetch" href="/next-page.js">

3. 懒加载 vs 预加载

特性	懒加载	预加载
目标	减少首屏负担	提升后续体验
加载时机	即将需要时	真正需要前
适用资源	图片、视频、长列表、路由组件	字体、脚本、下一页资源

4. 最佳实践

1. 首屏图片不要懒加载。
2. 给懒加载图片设置占位符，避免布局抖动。
3. preload 不要滥用，否则会占用带宽。
4. prefetch 适合用户大概率会访问的下一页。