IntersectionObserver 默认配置不适合首屏预取，因 threshold=[0] 和 rootMargin='0px' 导致触发滞后，必须结合 rootMargin 提前触发、threshold 多级灵敏度控制及资源类型分级策略，否则预取失效或引发竞态。
直接上结论：用 IntersectionObserver 做首屏资源预取，不能只“等元素进视口才加载”，必须结合 rootMargin 提前触发 + threshold 控制灵敏度 + 资源类型分级策略，否则预取会滞后、失效，甚至引发重复加载或竞态问题。
为什么 IntersectionObserver 的默认配置不适合预取
很多人一上来就写 new IntersectionObserver(callback)，然后监听所有带 data-prefetch 的元素——结果发现滚动到图片下方时，图片才开始请求，用户已经看到空白了。根本原因有三个：
-
threshold: [0]（默认值）意味着只有元素刚接触视口边缘（intersectionRatio === 0）时才触发，此时用户还没看到内容，但已错过预取窗口 -
rootMargin: '0px'（默认值）不预留缓冲区，元素真正进入可视区才响应，完全失去“预”字意义 - 没做资源优先级区分：一个 banner 图和一个底部“关于我们”模块的 JS chunk，不该用同一套触发逻辑
如何设置 rootMargin 和 threshold 实现可靠预取
预取不是越早越好，而是要平衡「提前量」和「误触发率」。实测在 2026 年主流设备（含三折叠 Mate XT 的 G 态 2200×2000 屏幕）下，这套组合最稳：
-
rootMargin: '200px 0px'：垂直方向提前 200px 触发，覆盖中速滚动场景；横屏/三折叠展开态下，这个值仍能避免过早加载 -
threshold: [0.05, 0.25, 0.5]：不只监听“刚出现”，而是分三级反馈——5% 可见时发 DNS 预解析，25% 时 fetch 资源 header，50% 时正式加载主体（如img.src或import()） - 避免用
threshold: [0, 1]：0% 触发太激进，尤其在快速滚动或低性能设备上，会导致大量无效预取；100% 又太晚，失去意义
如何按资源类型分级调度预取行为
同一个 IntersectionObserver 实例可以观察多个目标，但回调里必须根据 entry.target.dataset.prefetchType 区分处理逻辑，否则图片、字体、JS chunk 全混在一起，容易阻塞关键路径：
-
prefetchType="image"：拿到entry.isIntersecting && entry.intersectionRatio >= 0.25后，赋值img.src = img.dataset.src，并立即unobserve(img) -
prefetchType="js-chunk"：仅在intersectionRatio >= 0.5且!window.__LOADED_CHUNKS?.has(key)时执行import('./module.js')，加载后标记状态防重复 -
prefetchType="font"：用document.fonts.load()配合entry.intersectionRatio >= 0.05启动，不阻塞渲染，且支持 fallback 字体降级
注意：不要在回调里直接调 fetch() 下载大文件——这会抢占主资源带宽；应优先用 link[rel=prefetch] 让浏览器自主调度。
兼容性与降级必须手动控制，polyfill 不可靠
IntersectionObserver 在 Safari 15.4+、Chrome 78+、Firefox 76+ 原生支持，但 iOS 15.6 以下、部分国产 WebView 仍不支持。关键点是：
- 别依赖
@babel/preset-env自动注入 polyfill——它只处理语法，不补 API - 必须显式判断：
if ('IntersectionObserver' in window)，不成立时退回到基于getBoundingClientRect()+requestIdleCallback的节流轮询（注意：轮询间隔不低于 120ms，否则 INP 指标爆表） - 三折叠设备（如 Mate XT）的 G 态下，
document.documentElement.clientHeight可能因分屏动画未完成而返回错误值，此时应加一层setTimeout(..., 100)延迟初始化 observer
最易被忽略的是：预取系统一旦启动，就必须全程管理资源生命周期——比如用户快速滚动又回退，已触发但未完成的 import() 不能丢弃也不该重发，得靠 WeakMap 缓存 Promise 实例。这点在模块化系统里，比 observer 配置本身更难调试。
