用IntersectionObserver做曝光埋点需设threshold数组（如[0.2]）控制可见比例阈值，绑定data-track-id标识元素，回调中结合isIntersecting与intersectionRatio判断首次曝光并标记reported，及时unobserve或disconnect防泄漏。
用 IntersectionObserver 做元素曝光埋点，核心是监听目标元素是否进入视口，并在满足条件（比如可见比例达标）时触发上报逻辑。它比手动监听 scroll 事件更高效、更精准，且天然支持懒加载和性能优化。
初始化 Observer 并配置阈值
曝光埋点通常不追求“刚一露头”就上报，而是等元素有一定可见比例（如 20% 或 50%）才触发，避免误报。通过 threshold 选项控制：
-
threshold: [0, 0.2, 0.5, 1]表示当元素可见比例分别达到 0%、20%、50%、100% 时都会触发回调 - 常用做法是设
[0.2]或[0.5]，兼顾灵敏度与准确性 - 注意：
threshold是数组，不是单个数字（即使只传一个也要写成[0.2]）
绑定目标元素并记录唯一标识
每个需要埋点的元素应有稳定、可识别的标识（如 data-track-id），方便后续归因和分析：
- HTML 中添加：
<div class="ad-banner" data-track-id="home_banner_01">... - JS 中获取：
const id = targetElement.dataset.trackId; - 避免用
innerHTML、索引或动态 class 名作为标识，容易因 DOM 变动失效
在回调中判断是否首次曝光并上报
同一个元素可能多次进出视口，埋点一般只需记录“首次可见”，需自行维护状态：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
立即学习“Java免费学习笔记（深入）”；
- 用
WeakMap或元素自身的dataset标记是否已上报：targetElement.dataset.reported = 'true'; - 在回调中检查：
if (entry.isIntersecting && entry.intersectionRatio >= 0.2 && !targetElement.dataset.reported) - 满足条件后立即调用埋点函数（如
trackExposure(id)），再标记为已上报 - 不建议用全局数组存 ID——内存泄漏风险高，
WeakMap更安全
合理断开观察器或清理状态
页面长期存在或元素被销毁时，需防止内存泄漏和重复上报：
- 元素移出 DOM 前调用
observer.unobserve(element) - 组件卸载（如 React
useEffect清理函数、VuebeforeUnmount）中调用observer.disconnect() - 如果元素只是隐藏（
display: none或visibility: hidden），Observer 仍会工作，但intersectionRatio为 0，不影响逻辑
不复杂但容易忽略的是阈值设置和首次性控制——这两点直接决定数据质量。只要标识稳定、判断严谨、清理及时，就能拿到干净可靠的曝光数据。
