[!info] related notes

• 所属 MOC: 前端基础 MOC, 前端工程化 MOC
• 相关概念: 前端性能优化一般从哪些方面做, web-first-screen-load-optimization, 浏览器渲染流程, 曝光埋点

懒加载

懒加载的核心不是“晚一点加载一切”，而是把非关键资源推迟到真正需要时再加载。

一句话定义

懒加载就是按需加载：当前不影响首屏或当前交互的资源，先不急着下载和执行。

常见场景

• 路由组件按需加载
• 首屏外图片延迟加载
• 大型图表、编辑器、地图等重型模块延迟引入
• 滚动到可见区域时再加载内容

它解决什么问题

• 减少首屏资源体积
• 缩短首屏可交互时间
• 避免用户根本不会访问的代码被提前下载

常见实现方式

代码懒加载

const Page = () => import('./Page')

图片懒加载

• 原生 loading="lazy"：浏览器可在资源接近视口时提前请求，具体阈值由实现决定。
• IntersectionObserver：按可见性与 rootMargin 触发加载；需实际 observe 目标并处理加载结果。

常见误区

• 以为写了动态导入，所有相关业务代码都会自动延后
• 关键初始化逻辑仍然在首屏同步执行，导致“形式上懒加载，实际上没变轻”
• 把本该预加载的关键资源也过度延后，反而影响体验

边界与验证

动态 import() 在执行时启动模块加载；在模块顶层立即调用它，并不等于推迟到用户交互。首屏 LCP 图片等关键资源通常不应加 lazy。

在 Network 面板比较首次加载与触发后的请求，结合 LCP、交互时延和加载失败反馈判断效果。给图片预留尺寸，避免加载后布局跳动。

学习检查

1. 什么情况下动态导入仍会在首屏发起请求？
2. 原生图片 lazy 与 IntersectionObserver 的触发时机有什么区别？
3. 为什么关键首屏资源不适合一律懒加载？

参见：MDN 懒加载、资源提示。