懒加载核心是按需加载，图片用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>（Vue）统一处理加载状态，显示骨架屏或 loading 提示 - 避免在 render 中直接调用
import()，应封装成函数或配合状态控制；首次加载后建议缓存模块实例（如用React.memo或keep-alive） - 可配合 webpack 的
/* webpackChunkName: "chart" */注释做代码分割命名，便于调试和缓存管理
进阶优化：预加载与加载优先级控制
懒加载不是“越晚越好”，关键路径上的资源仍需合理预判。
立即学习“Java免费学习笔记（深入）”；
- 对用户大概率会访问的区域（如首屏下方一屏内容），可用
loading="lazy"（原生 HTML 属性）+fetchpriority="high"组合微调 - 滚动快速接近时，可对下几个目标元素提前触发
new Image().src = url进行预加载（注意控制并发数，避免阻塞） - 利用
document.createElement("link").rel = "preload"对关键懒加载资源做声明式预加载（需配合 HTTP/2 Server Push 或构建时分析） - 对图片，优先使用
srcset+sizes响应式方案，再叠加懒加载，避免高 DPR 设备加载小图
注意事项与常见坑
懒加载容易引入新问题，上线前务必验证。
- SEO 友好性：搜索引擎爬虫可能不执行 JS，关键图片建议保留语义化
img标签 +alt，非关键图再懒加载 - 无障碍访问：懒加载后替换
src时，若图片用于内容传达，需同步更新aria-label或通过role="img"保持语义 - CSS 占位缺失：未设置宽高或 aspect-ratio 的图片加载后会引发布局偏移（CLS），务必用容器约束尺寸或 CSS
aspect-ratio - 服务端渲染（SSR）场景：需区分客户端 hydrate 后再初始化 observer，服务端直接输出真实
src或占位图，避免水合 mismatch
