你可能会说
页面有 50 张图片，一打开全在加载，太慢了。
懒加载是延迟加载视口外资源的策略——图片/组件进入视口才开始加载，大幅减少首屏请求。
只加载当前看得到的内容，滚动到哪才加载哪。图片和长列表常用，首屏速度大幅提升。
生活类比
像自助餐——先拿眼前的菜，吃完了再去取，不用一开始就把所有菜端上桌。
🎮 动手试试
👇 滚动查看图片逐步加载
关于「懒加载」，以下哪个描述最准确？
你可以这样告诉 AI
帮我实现图片懒加载：视口外图片用 loading=lazy，首屏图片用 priority 预加载，非首屏组件用 dynamic import 懒加载。
预加载是提前加载（马上要用），懒加载是推迟加载（可能不用）。方向相反。
代码分割是按路由拆分 JS 包，懒加载是延迟加载任何资源（图片、组件、字体）。
长页面图片优化
页面有大量图片时，只加载视口内的图片，用户滚动到附近才开始下载，首屏速度大幅提升。
和 AI 协作时
想让 AI 做懒加载时，直接说「图片用 loading=lazy，非首屏组件用 dynamic import 延迟加载」。
首屏关键资源
首屏的 Hero 图、Logo、关键 CSS 等必须立即加载的内容用懒加载反而拖慢体验，应该用 priority 预加载。
与前端性能无关的项目
后端服务、CLI 工具、数据分析等不需要考虑资源加载策略。
只加载当前看得到的内容，滚动到哪才加载哪。图片和长列表常用，首屏速度大幅提升。
像自助餐——先拿眼前的菜，吃完了再去取，不用一开始就把所有菜端上桌。
和 AI 沟通时提到「图片用懒加载」，就是滚到附近才开始下载图片。