模块级曝光统计需以语义完整dom容器为单元，结合状态机防误报漏报、root适配局部滚动、阈值分层与首屏直报，避免资源浪费。
直接用 IntersectionObserver 做模块级曝光统计，关键不在“能不能”，而在“怎么避免误报、漏报和资源浪费”。核心是把“模块”当作独立观察单元，结合业务语义（比如是否首屏、是否可交互、是否已上报）做状态隔离与生命周期控制，而不是简单监听 isIntersecting 就发埋点。
模块定义与观察粒度
一个“模块”应是一个语义完整、可独立曝光的 DOM 容器（如商品卡片、广告位、内容区块），而非单个图片或文字节点。这样能：
- 统一管理该模块内所有子元素的可见性逻辑，避免为每个图片/标题重复创建观察器
- 支持模块级曝光阈值（例如：模块整体 30% 高度进入视口才计为有效曝光）
- 便于绑定业务上下文（如 moduleId、position、abTestGroup）随埋点一并上报
防抖+去重+状态机驱动上报
仅靠 isIntersecting === true 触发埋点极易重复——滚动来回抖动、快速滑过又折返都会触发多次。应引入轻量状态机：
-
未曝光 → 进入阈值（
intersectionRatio ≥ 0.3）→ 待上报 -
待上报 → 实际执行埋点 + 标记
reported = true→ 已上报 -
已上报 → 离开视口后不重置；若需“再次曝光”，需显式配置
resetOnLeave: true（如轮播广告）
无需节流函数，IntersectionObserver 本身已批量异步回调；重点是每次 entry 处理前检查当前状态，跳过已上报项。
根容器与滚动上下文适配
默认 root: null 监听的是整个视口，但很多模块嵌套在局部滚动容器中（如侧边栏、弹窗、Tab 内容区）。这时必须指定 root 为对应容器元素，并确保它有明确的 overflow: auto/scroll 和高度限制。
- 动态模块（如 Tab 切换后新渲染的列表）需在插入 DOM 后立即调用
observer.observe(moduleEl) - 销毁模块（如路由跳转、Tab 关闭）时必须调用
observer.unobserve(moduleEl)，防止内存泄漏 - 推荐封装一个
useModuleObserverHook（Vue）或自定义 Hook（React），自动处理 observe/unobserve 生命周期
阈值与预加载策略协同
曝光统计 ≠ 懒加载，但二者常共存。建议分层设置：
-
曝光判定阈值：设为
[0.1, 0.5]，用entry.intersectionRatio >= 0.1表示“初见”，>= 0.5表示“稳定可见”，后者才触发主埋点 -
预加载 margin：用
rootMargin: '200px'提前触发资源加载（如图片、视频封面），但不触发曝光埋点——曝光只看实际交叉比，不看 margin - 对首屏模块，可跳过 Observer，直接在
onMounted或DOMContentLoaded后立即标记“首屏曝光”，避免因渲染延迟漏统
