threshold仅按可见比例触发，对高矮元素响应不一致且无法保证加载完成；rootmargin通过扩展视口边界实现可控预加载，需带单位（如'200px 0px'），配合isintersecting判断和及时unobserve/disconnect避免重复加载与内存泄漏。
为什么直接用 threshold 做预加载不可靠
很多人以为把 threshold 设成 [0, 0.25] 就能“提前触发”，但实际中元素刚露出 25% 时，网络请求可能才发出去，图片还没下载完就又滚过去了。更糟的是，threshold 是比例阈值，不是像素偏移——它对高矮元素响应不一致：一个 10px 高的按钮在 0.25 阈值下几乎无法触发，而一张 800px 高的 banner 却过早激活。
rootMargin 才是预加载的真正开关
rootMargin 允许你把“视口边界”向外扩展，让观察器在元素真正进入屏幕前就感知到它。这才是可控、可预测的预加载基础。
- 写法必须带单位：
'200px 0px 0px 0px'（上右下左），不能只写200或'200px'（后者会被忽略） - 负值也合法：
'-100px 0px 0px 0px'表示只在元素已进入视口 100px 后才开始观察，适合防误触 - 移动端需注意：
vh单位在 iOS Safari 中部分版本不支持，优先用px - 配合
isIntersecting === true判断，而非仅看intersectionRatio，避免因滚动过快导致 ratio 来不及更新
如何避免重复加载与内存泄漏
延迟渲染器一旦挂载多个目标，又没及时清理，很容易积累未卸载的 IntersectionObserver 实例，尤其在 React/Vue 的列表重渲染场景下。
- 每个目标元素只调用一次
observer.observe(target)；重复调用不会报错，但会覆盖之前的状态 - 加载完成立即调用
observer.unobserve(target)，不要等disconnect()—— 后者会停掉整个观察器，影响其他目标 - 组件卸载时（如 React 的
useEffectcleanup、Vue 的beforeUnmount）必须调用observer.disconnect()，否则 observer 持有 DOM 引用，阻止 GC - 避免在回调里直接操作
target的innerHTML或大量 DOM 插入——这会触发 layout，抵消 IntersectionObserver 的异步优势
复杂滚动容器下的 root 配置陷阱
当你的目标元素不在文档视口，而在某个 overflow: auto 的容器内时，root: null 会完全失效——它只会监听文档级滚动，对容器内滚动毫无反应。
- 必须显式传入容器节点：
root: document.querySelector('.scroll-container') - 该容器必须是目标元素的**祖先节点**，且已渲染完成；若容器是动态插入的，需确保
observer在容器挂载后再创建 - 容器若设置了
transform或will-change，某些旧版 Chrome 会错误计算intersectionRect，建议加contain: layout style paint修复 - 不要混用
root和rootMargin的单位逻辑：前者是 DOM 节点，后者是字符串样式值，二者无隐式转换
真正难的不是注册 observer，而是决定「什么时候取消观察」和「什么时候重新注册」——比如用户快速来回滚动时，已加载的组件是否要保留状态？这些边界逻辑比初始化多三倍代码量，却极少被文档提及。
