懒加载的核心是按需触发，需满足资源未初始化且触发时机由用户行为或可视区域决定；推荐用IntersectionObserver监听视口、dynamic import()实现组件级懒加载，并注意布局抖动、观察器重置及SSR兼容性问题。

懒加载的核心是「按需触发」，不是「延迟执行」

很多人误以为 setTimeout 或 Promise.resolve().then() 就是懒加载——其实那只是延迟执行。真正的懒加载必须满足两个条件：资源未初始化 + 触发时机由用户行为或可视区域决定。比如图片没进视口就不发请求，组件没被点击就不实例化。

用 IntersectionObserver 监听元素是否进入视口

这是现代前端实现图片/列表项懒加载的首选方案，比监听 scroll 事件更轻量、更可靠。

• 兼容性注意：IntersectionObserver 在 iOS Safari 12.2+ 和 Chrome 51+ 原生支持；如需支持旧版，得引入 polyfill（如 @juggle/intersection-observer）
• threshold 参数很关键：设为 [0, 0.1, 1] 可提前 10% 高度加载，避免滚动过快时白屏
• 观察器应复用，不要每个图片都新建一个 IntersectionObserver 实例

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
}, { threshold: [0, 0.2] });

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

动态 import() 实现路由/组件级懒加载

这是 Webpack/Vite 等打包工具支持的原生语法，本质是代码分割 + 异步加载模块。

• 不能写成 import Component from './Component.vue' —— 这是静态导入，会打包进主 bundle
• 必须用函数式调用：const { default: Component } = await import('./Component.vue')
• Vue Router 中写法：component: () => import('./views/Home.vue')；React Router v6 推荐配合 Suspense 和 lazy()
• 注意服务端渲染（SSR）场景：Node.js 环境不支持动态 import()，需用 require() 回退或禁用该逻辑

懒加载容易被忽略的三个坑

实际项目中最常栽跟头的地方不在语法，而在边界和协作细节：

• 图片懒加载后，缺失 width/height 属性会导致布局抖动 —— 建议在 HTML 中显式声明，或用 aspect-ratio CSS 属性占位
• SPA 中切换路由后，新页面的懒加载元素可能因 IntersectionObserver 实例未重新绑定而失效 —— 要在组件挂载/激活时重置观察
• 服务端返回的 HTML 若已预渲染了真实 src，客户端再做懒加载就多余甚至冲突 —— 需约定服务端只输出 data-src，且首屏资源走 SSR 直出