懒加载的核心是按需触发，需满足资源未初始化且触发时机由用户行为或可视区域决定；推荐用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()回退或禁用该逻辑
懒加载容易被忽略的三个坑
实际项目中最常栽跟头的地方不在语法，而在边界和协作细节：
立即学习“Java免费学习笔记（深入）”；
- 图片懒加载后，缺失
width/height属性会导致布局抖动 —— 建议在 HTML 中显式声明，或用aspect-ratioCSS 属性占位 - SPA 中切换路由后，新页面的懒加载元素可能因
IntersectionObserver实例未重新绑定而失效 —— 要在组件挂载/激活时重置观察 - 服务端返回的 HTML 若已预渲染了真实
src，客户端再做懒加载就多余甚至冲突 —— 需约定服务端只输出data-src，且首屏资源走 SSR 直出
