Intersection Observer 是浏览器原生 API，用于高效监听元素与视口的交叉状态，实现懒加载；它无需手动计算位置、不阻塞主线程、支持异步回调及局部容器，性能优于 scroll 事件。
Intersection Observer 是浏览器原生提供的 API，专门用于监听目标元素与视口（或指定容器）的交叉状态变化。实现图片、组件或内容的懒加载时，它比传统的 scroll 事件监听更高效、更轻量。
懒加载的核心逻辑：只在元素即将进入可视区域时才加载资源
传统方案常依赖监听 scroll 或 resize 事件，频繁触发重排重绘，还容易因节流/防抖设置不当导致加载延迟或卡顿。Intersection Observer 把这个过程交给浏览器底层调度，回调函数只在元素真正进入或离开阈值范围时执行，不阻塞主线程。
- 无需手动计算元素位置、滚动偏移量或视口尺寸
- 自动处理滚动、缩放、页面可见性切换等场景
- 支持异步回调，天然适配 Promise 和现代加载逻辑（如动态 import）
基础用法：三步完成图片懒加载
假设页面中图片使用 data-src 存放真实地址，src 先为空或占位图：
-
创建观察器：传入回调函数和配置项（如
threshold: 0.1表示元素 10% 进入视口就触发） -
定义回调：在回调中判断
isIntersecting，为真则加载图片并停止观察该元素 -
开始观察：对每个带
data-src的observer.observe(img)
代码片段示意：
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.1 });
document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));
相比 scroll + getBoundingClientRect 的明显优势
Intersection Observer 不是“更好写的 scroll”，而是架构层面的升级：
- 性能友好：浏览器在空闲时段批量处理交叉计算，不打断渲染帧，FPS 更稳定
- 兼容性扎实：Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+ 均已支持，配合简单降级（如 onload fallback）可覆盖绝大多数用户
- 语义清晰：关注“是否可见”，而非“坐标多少”，逻辑更贴近业务意图，维护成本低
- 支持根容器：可指定任意元素作为“视口”，轻松实现局部滚动容器内的懒加载（如弹窗列表、卡片流）
实用技巧与注意事项
真正落地时，几个细节会影响体验和健壮性：
- 给图片设置固定宽高或 aspect-ratio，防止加载时布局跳动
- 配合
loading="lazy"属性做双重保障（现代浏览器会自动处理原生懒加载） - 对关键首屏图片，仍建议直接写
src，避免白屏风险 - 服务端开启 HTTP/2 或 CDN 缓存，让懒加载后的请求更快响应
- 若需兼容老版本 iOS Safari，可用 polyfill（如 w3c 官方 polyfill），但注意 polyfill 仍基于 scroll 模拟，性能略打折扣
