当前位置：首页 > java >正文

什么是懒加载？

java 2025/5/14 11:04:45

懒加载（Lazy Loading）是一种延迟加载资源或数据的优化技术，其核心思想是仅在需要时加载资源，而不是一次性加载所有内容。这种技术广泛应用于前端开发、数据库查询、资源管理等领域，以提高性能和用户体验。

核心概念

按需加载：资源（如图片、代码模块、数据）在初始加载时不立即加载，而是在用户需要访问或使用时才加载。
减少初始负载：降低首次加载时间，节省带宽和内存。
动态加载：通过条件判断或用户交互触发加载过程。

常见应用场景

前端图片懒加载
网页中的图片在用户滚动到可见区域时才加载，减少首屏加载时间。

<img data-src="image.jpg" class="lazy" />

运行 HTML

// 使用 Intersection Observer API 监听图片是否进入视口
const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src;observer.unobserve(img);}});
});
document.querySelectorAll('.lazy').forEach(img => observer.observe(img));

JavaScript 模块懒加载
使用 import() 动态导入模块，减少初始包体积。

// 用户点击按钮时加载模块
button.addEventListener('click', async () => {const module = await import('./heavy-module.js');module.run();
});

React 组件懒加载
通过 React.lazy 和 Suspense 延迟加载组件。

const LazyComponent = React.lazy(() => import('./HeavyComponent.jsx'));function App() {return (<Suspense fallback={<div>Loading...</div>}><LazyComponent /></Suspense>);
}

懒加载的优缺点

优点	缺点
减少初始加载时间	可能增加后续操作的延迟
节省带宽和内存占用	实现复杂度较高（需处理加载状态）
提升用户体验（尤其是移动端）	需要额外监听用户行为（如滚动事件）
适用于大型应用或资源密集型场景	可能导致内容闪烁（需占位符优化）

实现懒加载的关键技术

Intersection Observer API（前端）：监听元素是否进入视口。
动态导入（Dynamic Import）（JavaScript）：import() 语法。
路由级代码分割（React/Vue）：如 React Router 结合 React.lazy。
代理模式或虚拟代理（设计模式）：延迟初始化对象。

与其他加载策略的对比

策略	描述	适用场景
预加载	提前加载可能需要的资源（如 `preload`）	关键资源加速后续操作
懒加载	按需加载非关键资源	图片、非首屏组件
饥饿加载	同时加载当前和后续资源（如分页预加载）	瀑布流或分页内容