IntersectionObserver 更高效，因其是浏览器原生异步回调机制，仅在元素进出视口时触发，不阻塞主线程，无需手动节流，支持自定义容器、相交比例及 rootMargin 精准控制。
用 IntersectionObserver 替代传统滚动监听，能显著降低性能开销、避免频繁重排重绘，并更精准地响应元素可见性变化——尤其适合懒加载、动画触发动效、广告曝光统计等场景。
为什么 IntersectionObserver 更高效？
传统滚动监听（scroll 事件 + getBoundingClientRect()）会在滚动过程中高频触发，容易造成卡顿；而 IntersectionObserver 是浏览器原生异步回调机制，只在元素进入/离开视口时才通知，不阻塞主线程，也不依赖 requestAnimationFrame 手动节流。
- 无需手动防抖或节流，浏览器自动优化调用时机
- 支持监听目标元素与任意祖先容器（而非仅视口）的交叉状态
- 可精确获取相交比例（
intersectionRatio），便于实现“50% 进入即触发”等逻辑 - 兼容性良好：Chrome 51+、Firefox 55+、Safari 12.1+、Edge 79+，配合 polyfill 可覆盖大部分旧环境
基础用法：监听元素是否进入视口
只需创建观察器实例，传入回调函数和配置项，再调用 observe() 指定目标元素：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('元素已可见：', entry.target);
// 例如：开始加载图片、启动动画
entry.target.classList.add('animated');
// 可选：停止观察，避免重复触发
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1 // 当 10% 面积进入视口时触发
});
// 开始监听所有 .lazy-image 元素
document.querySelectorAll('.lazy-image').forEach(img => observer.observe(img));
进阶技巧：控制触发精度与范围
通过配置项灵活适配不同需求：
立即学习“Java免费学习笔记（深入）”；
-
threshold：接受数字或数字数组，如[0, 0.25, 0.5, 0.75, 1]可在多个相交比例点分别回调 -
root：指定监听容器（如某个滚动区域），默认为浏览器视口；需注意该元素必须是目标元素的祖先且设置了overflow -
rootMargin：类似 CSS 的 margin，支持"10px 0px -20px"语法，用于扩大或缩小判定边界（常用于提前加载） -
trackVisibility（实验性）：部分浏览器支持，启用后即使元素被隐藏（visibility: hidden）也能正确报告状态
注意事项与常见问题
实际使用中需留意几个关键细节：
- 目标元素必须已挂载到 DOM，否则
observe()会静默失败 - 若目标元素动态添加，需在插入后立即调用
observer.observe()，不能依赖首次批量绑定 - 当
root是局部滚动容器时，确保其有明确高度和overflow: auto/scroll，否则可能无法触发 - 回调中修改 DOM 不会引发额外性能问题，但避免在其中执行大量同步计算；如需复杂处理，可用
setTimeout或queueMicrotask延迟
