首屏 秒变 秒，主要武器正是懒加载。

使用者打开一个页面只看到首屏那一小块区域。而图片、JS、组件，你通常一次性全加载了。那些藏在折叠线下面的内容，那些使用者根本不会滚动到的代码，都在跟首屏抢带宽。导致首屏卡顿流量浪费布局抖动。

懒加载不是“延迟加载”，而是只加载使用者当前需要的东西。老实说，这篇文章从图片、路由、组件三个维度，给出可直接落地的方案。

一、图片懒加载：最直观的性能提高

. 原生 loading="lazy"

现代浏览器原生支持。一行代码搞定：

浏览器会自动判断图片是否接近可视区域，接近时才开始加载。Chrome+、Edge+、Firefox+ 均支持。兼容老旧浏览器时作为渐进提高手段，不用担心不支持的浏览器会崩溃。它们只会忽略这个属性并立即加载图片。

. IntersectionObserver 手动实现

需要更细粒度的控制时可用 IntersectionObserver

const observer = new IntersectionObserver => {
entries.forEach(entry => {
if {
const img = entry.target;img.src = img.dataset.src;// 将真实图片地址赋给 src
observer.unobserve;// 加载完成后停止观察
}
});},{ rootMargin: '200px' });// 提前 200px 开始加载，使用者无感知
document.querySelectorAll.forEach(img => {
observer.observe;})，

对应 HTML：

占位图 placeholder.png 可以是极小的灰色方块或模糊缩略图，保证页面布局稳定。

. 避免布局偏移

懒加载最大的隐患是图片加载后撑开页面导致内容跳动。修复方式很简单——给图片容器预留占位空间：

.img-wrapper {
position: relative;width: 100%，其实，padding-bottom: 56.25%;/* 按比例预留空间，例如16:9 */
}
.img-wrapper img {
position: absolute;top: 0，不过，left: 0;width: 100%，height: 100%;}

或者在 上直接设置 / 属性，现代浏览器会根据这两个属性自动保留宽高比。说起来，

二、路由懒加载：SPA 首屏体积的“瘦身刀”

单页应用首屏慢。很大程度是因为所有页面组件都被打包进一个 bundle。通过动态 实现代码分割，让使用者访问哪个页面时才下载对应的 JS。

. React Router v6

import { lazy,Suspense } from 'react';import { Routes,Route } from 'react-router-dom';const Dashboard = lazy => import);const Settings = lazy => import);const Analytics = lazy => import);按理说，function App {
return (
}>

} />
} />
} />

);}

,在组件下载期间展示骨架屏或 loading 动画。Webpack/Vite 会把每个页面拆成独立 chunk，首屏 bundle 通常能下降 **70%‑90%**。

. Vue Router

const Dashboard = => import;const Settings = => import;const router = createRouter({
routes的观点是，});

Vue 会自动将每个动态导入拆成独立 chunk，无需额外配置。

. 路由懒加载与预加载的配合

纯粹的懒载会在切换路由时出现短暂空白。对使用者极大概率会访问的页面可以在空闲时间提前预取对应 chunk：

// 在 Dashboard 页面中预加载 Settings 页面
import { lazy } from 'react';const Settings = lazy => import);function Dashboard {
useEffect => {
const preload = => import;
if {
requestIdleCallback;} else {
setTimeout;}
},)，}

或者使用 ``：

Webpack 魔法注释一样可触发 prefetch：

const Settings = lazy => import);

三、组件懒加载：非首屏可见的重型组件“延迟到场”

. React 示例：图表组件懒加载

import { lazy。Suspense,useEffect,useState } from 'react';import { useInView } from 'react-intersection-observer';const HeavyChart = lazy => import);function Dashboard {
const { ref,inView } = useInView;const = useState;不过，useEffect => {
if setShowChart;},)，return (

{showChart?(
加载图表中...
}>

) : (

滚动至此加载图表
)}
);}

• )监听组件是否进入视口；

. Vue 示例：地图组件懒加载

. 哪些组件应该优先考虑懒载？

• ECharts / Highcharts 等大型图表库；
• TinyMCE / Quill / Monaco Editor 等富文本编辑器；
• Amap / BaiduMap / Mapbox 等地图 SDK；
• MPEG‑DASH 或 HLS 视频播放器；
• 多步骤向导或复杂表单。说起来，

四、三种懒加⽤配合：完整页面的加⽤策略示例

假设后台管理首页包含：

• 顶部数据卡片；
• 折线图；
• 使用者列表。

完整流程如下这方面，

 页 面 打 开
├─ 数据 卡片 —— 即 时 渲染
├─ 图 表 占 位 div —— 展 示 骨 架 屏
├─ 列 表 占 位 div —— 展 示 骨 架 屏
├─ 底 部 图 像 —— 不 加载。保 持 空 白
↓ 图 表 区 域 入 场
→ 动 态 加 内读 echarts 并 渲染 图 表
↓ 列 表 区 域 入 场
→ 动 态 加载 列 表 元 件 + 虚 拟 滚 动 渲染 可视 行
↓ 底 部 图 像 入 场
→ 将 data‑src 替 换 为 真 实 图 像 地 址

通过上述分层策略，使用者感知到 的 首 屏 时间 大幅 缩 短，而后续 内容 在 滚 动 中 自 然 完 成 加载。

五 、 懒 加载 常见 踩坑 与 解 决 方 案

. SEO 问题

搜索引擎爬虫往往不执行 JavaScript，导致使用惰性技术渲染出的图片和内容无法被索引。从解决办法来看，

• 关键首屏图片不要使用惰性；
• 对关键页面采用 SSR/SSG；
• 为惰性图片添加 `

. 打印 时 图片 缺失

打印操作不会触发滚动事件，惰性图片可能仍未下载。至于解决办法，在 `@media print` 中强制显示所有 `` 并取消 `loading` 属性。其实，

. 使用者 快速 滚动 时 的 加载 延迟

如果一次性触发大量惰性资源。请求并发可能导致网络阻塞。说起来，再看解决办法，

• 使用 `rootMargin` 提前触发，让资源提前准备；
• 结合 `requestIdleCallback` 把低优先级请求推迟到空闲时间；说起来，
• 对同类资源做批量请求或限流。

. 骨架 屏 与 CLS

没有占位高度会导致布局频繁跳动，被 Chrome 的累计布局偏移 扣分。老实说，说到解决办法，

• 为每个惰性模块预留固定最小高度或宽高比；
• 使用骨架 UI填充占位区间；

六 、

类型	主要 API	适用场景
图片惰性	loading ="lazy"/ or IntersectionObserver
路由惰性	React.lazy dynamic import
组件惰性

懈怠不是“延迟”，而是

---