如何实现JavaScript懒加载_图片和组件延迟加载的策略

懒加载核心是按需加载，图片用Intersection Observer替代scroll监听，组件用dynamic import()配合React.lazy/Vue defineAsyncComponent，需注意SEO、无障碍、CLS及SSR适配。

懒加载的核心是“按需加载”，不是页面一打开就全量加载资源，而是等用户即将看到某张图片或某个组件时再加载。这对首屏性能、带宽节省和用户体验提升非常直接。

图片懒加载：用 Intersection Observer 替代 scroll 监听

传统靠监听 scroll + getBoundingClientRect 判断是否进入视口，性能差、易抖动、兼容性弱。现代推荐用 Intersection Observer，原生、轻量、自动节流。

• 创建 observer 实例，设置 rootMargin（如 "50px"）提前触发加载，避免滚动过快时白屏
• 给图片的 src 暂存到自定义属性（如 data-src），初始 src 设为空或占位图
• 在 callback 中判断 isIntersecting 为 true 时，把 data-src 赋给 src，并调用 unobserve 避免重复执行
• 对低版本浏览器可降级为 scroll + requestIdleCallback 或使用 lozad.js 等轻量库

组件懒加载：结合 dynamic import() 与条件渲染

适用于路由级或模块级大组件（如图表、富文本编辑器、地图），不适用于高频切换的小组件。

• 用 import() 动态导入组件，返回 Promise，配合 React.lazy（React）或 defineAsyncComponent（Vue）封装
• 搭配 Suspense（React）或 <suspense></suspense>（Vue）统一处理加载状态，显示骨架屏或 loading 提示
• 避免在 render 中直接调用 import()，应封装成函数或配合状态控制；首次加载后建议缓存模块实例（如用 React.memo 或 keep-alive）
• 可配合 webpack 的 /* webpackChunkName: "chart" */ 注释做代码分割命名，便于调试和缓存管理

进阶优化：预加载与加载优先级控制

懒加载不是“越晚越好”，关键路径上的资源仍需合理预判。

标签： css vue react javascript java html js seo 浏览器 懒加载 keep-alive