JavaScript懒加载通过延迟加载图片和组件优化页面性能。1. 图片懒加载：利用Intersection Observer API或scroll事件监听，当图片接近视口时将data-src赋值给src实现按需加载；2. 组件懒加载：使用dynamic import()动态引入组件，结合React.lazy与Suspense实现路由或交互组件的异步加载，降低首屏体积，提升渲染速度。
页面加载性能直接影响用户体验，尤其在图片多或组件复杂的情况下。JavaScript 懒加载是一种优化手段，让资源在需要时才加载，减少初始请求压力。重点在于：图片延迟加载和组件动态引入。
图片懒加载：让图像按需出现
当页面包含大量图片时，一次性加载所有图像会拖慢首屏速度。通过懒加载，只有进入视口附近的图片才会发起请求。
实现方式主要有两种：
- Intersection Observer API：现代浏览器推荐方案，监听元素是否进入可视区域。
- scroll + getBoundingClientRect：兼容性更好，但性能稍差，适合低版本环境。
基本做法是将真实图片地址存于 data-src 属性，初始用占位图。当检测到元素接近可视区，再把 data-src 赋给 src。
立即学习“Java免费学习笔记（深入）”；
组件延迟加载：拆分逻辑，提升响应速度
对于功能模块或交互组件（如评论区、弹窗、图表），不必在页面打开时全部加载。可使用动态导入（dynamic import()）实现按需加载。
常见场景包括：
这种方式能显著降低首页包体积，加快首屏渲染。
实际代码示例
图片懒加载简单实现：
const images = document.querySelectorAll('img[data-src]');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.removeAttribute('data-src');
imageObserver.unobserve(img);
}
});
});
images.forEach(img => imageObserver.observe(img));
组件懒加载（React 示例）：
const LazyComponent = React.lazy(() => import('./HeavyComponent'));
function MySection() {
return (
<React.Suspense fallback="加载中...">
<LazyComponent />
</React.Suspense>
);
}
基本上就这些。核心思路是“先少载，后补上”，合理使用能让页面更轻快。 
