IntersectionObserver 是浏览器原生提供的API，用于异步监测目标元素与视口（或指定祖先元素）的交叉状态。

核心优势：

• 性能优异：浏览器底层实现，不依赖主线程轮询，不会像scroll事件那样频繁触发导致性能问题。
• 自动节流：浏览器以最优帧率回调，无需手动debounce/throttle。
• 支持iframe：可监测iframe内部元素的可见性。
• 代码简洁：相比传统scroll方案，代码量减少60%以上。

现代浏览器全面支持：Chrome 51+、Firefox 55+、Safari 12.1+、Edge 15+、Opera 38+ 均原生支持。

覆盖全球约 97%+ 的用户。对于需要兼容IE等老旧浏览器的项目，可使用官方polyfill：

npm install intersection-observer
// 或在HTML中引入
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>

如果用户浏览器不支持且无polyfill，建议提供降级方案（直接加载所有资源）。

loading="lazy"（Chrome 76+）是HTML原生图片懒加载属性，使用简单：

<img src="image.jpg" loading="lazy" alt="">

对比：

• loading="lazy"：仅适用于<img>和<iframe>，无法自定义触发距离，无法添加过渡动画。
• IntersectionObserver：适用于任何元素（图片、背景图、视频、组件、无限滚动等），可精确控制触发时机、添加动画、执行自定义逻辑。

两者可结合使用：对简单图片用loading="lazy"，对复杂场景用IntersectionObserver。

几乎没有负面影响，前提是正确实现：

• ✅ 使用data-src存储真实URL，搜索引擎爬虫可读取该属性。
• ✅ 保留alt属性，确保图片内容可被理解。
• ✅ 对于关键首屏内容（LCP元素），建议不使用懒加载，直接加载以优化LCP指标。
• ✅ Googlebot支持IntersectionObserver，能正常索引懒加载内容。
• ⚠️ 避免使用display:none隐藏内容——搜索引擎可能忽略不可见内容。

关键原则：内容在DOM中存在（而非动态插入），搜索引擎就能正常索引。

rootMargin 扩展视口的检测范围，语法与CSS margin相同："top right bottom left"

对于懒加载，最常用的是增大bottom值：

rootMargin: "0px 0px 200px 0px"  // 元素距离视口底部还有200px时就开始加载

推荐值：

• 图片懒加载：200px-300px（用户快速滚动时也能提前加载完成）
• 无限滚动：300px-500px（提前加载，无缝体验）
• 动画触发：0px-50px（元素进入视口后再触发动画）

设置过大会导致一次性加载过多资源，影响性能；设置过小则用户可能看到加载过程。

实用调试技巧：

• Chrome DevTools：打开开发者工具 → Rendering → 勾选 "Layer borders" 可查看合成层。
• 添加日志：在回调中console.log(entry.intersectionRatio, entry.isIntersecting)查看触发状态。
• 可视化检测范围：临时给root元素添加半透明背景，直观查看检测区域。
• 使用本工具：调整threshold和rootMargin参数，观察生成的代码变化，快速找到最佳配置。