IntersectionObserver初始化时不触发回调，主因是目标元素未挂载到DOM或offsetParent为null（如display:none、父级未渲染）；需确保元素已渲染且可见，延迟至useEffect/mounted中调用observe，并验证getBoundingClientRect有效。
IntersectionObserver 初始化时为什么元素没触发回调？
常见现象是页面加载后 IntersectionObserver 一直不执行回调，甚至滚动也不触发。核心原因是：被监听的元素尚未进入文档流，或监听时该元素的 offsetParent 为 null（比如 display: none、visibility: hidden、父级未渲染等）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保目标元素已挂载到 DOM，且可见（
getBoundingClientRect()能返回有效值） - 避免在组件
render阶段立即调用observe()，改在useEffect（React）或mounted（Vue）中执行 - 检查 CSS 是否意外隐藏了元素——
IntersectionObserver不监听visibility: hidden或opacity: 0，但会受display: none影响（元素完全脱离布局） - 初始化时传入
threshold要合理，例如[0, 0.1, 0.5, 1]比默认[0]更易捕获部分进入状态
如何用 IntersectionObserver 实现图片懒加载（不依赖 loading="lazy"）？
原生 loading="lazy" 兼容性好但控制粒度粗，无法自定义占位、错误降级或与业务逻辑联动。手写方案更灵活，也便于统一埋点。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加自定义属性，如
和data-srcset="real-2x.jpg 2x"，初始src指向占位图或为空 - 回调中判断
entry.isIntersecting === true后再赋值真实地址，并调用observer.unobserve(entry.target)避免重复加载 - 注意图片加载失败需 fallback：监听
img.onerror并设置备用图或提示 - 若页面有大量图片，可复用同一个
IntersectionObserver实例，避免每个图新建 observer
示例关键片段：
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.src = img.dataset.src;
img.srcset = img.dataset.srcset;
observer.unobserve(img);
}
});
});
滚动过程中频繁触发回调导致性能问题怎么办？
IntersectionObserver 本身是异步且节流的，但若回调里做了重排（如读写 offsetHeight）、触发 React 状态批量更新、或反复操作 DOM，仍可能卡顿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 回调中只做必要操作：赋值、发请求、标记状态；把 DOM 读写、计算样式等移出回调，或用
requestIdleCallback延后处理 - 避免在回调中直接调用
setState（React）或this.$forceUpdate（Vue），改用函数式更新或防抖后的状态合并 - 如果只是“显示/隐藏”，优先用 CSS 类切换（
opacity+transform），而非display: none（会触发重排） - 对长列表，可设
rootMargin: "200px"提前加载，减少滚动中密集触发
兼容性差的旧浏览器怎么兜底？
IE 完全不支持 IntersectionObserver，Safari
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检测构造函数是否存在：
if ('IntersectionObserver' in window)，否则走scroll + getBoundingClientRect轮询方案 - 轮询频率必须限制（如
throttle(scrollHandler, 100)），且只监听可视区域变化明显的容器，避免全页监听 - 降级时慎用
document.elementFromPoint，它在 iframe 或 pointer-events: none 下不可靠 - Webpack / Vite 构建时可通过
targets配置自动注入 polyfill，但更推荐按需加载：仅当检测失败时动态import('intersection-observer')
真正麻烦的不是 API 有无，而是「进入视口」的定义在不同方案下不一致：polyfill 的 rootMargin 行为、滚动方向判断、是否包含部分遮挡——这些边界 case 往往要靠视觉回归来确认。
