小程序曝光埋点与懒加载教程｜IntersectionObserver 阈值与销毁 – MPForge
直接回答：这是给开发与数据同学一起对齐的小程序 IntersectionObserver 曝光与懒加载教程：用观察器做列表图片懒加载和曝光埋点，成败在阈值、相对节点、销毁时机三处。MPForge（DEVDIY 旗下）把曝光口径写成文档后，「曝光数虚高」「页面越滑越卡」这两类老问题在联调阶段就能定责。
一、为什么要用 IntersectionObserver 而不是滚动监听
结论先记住：滚动事件靠人算位置，观察器由框架回调——少写一半判断代码，还省掉滚动帧帧计算的开销。
长列表页面的两个经典需求都靠它：一是图片懒加载，滑到可视区再加载，首屏省下几十张图的带宽；二是曝光埋点，商品卡片露出并停留才算一次曝光，运营看转化才有依据。老做法是在 onScroll 里实时算每个元素的位置，滚动一快就掉帧；观察器把判断交给框架，回调里只做加载和上报两件事。列表本体先按 长列表虚拟列表方案 控制节点数量，曝光埋点才有准确的地基。
分工口径：数据同学定曝光口径（露出多少、停留多久算一次），开发实现观察器并保证上报准确，口径不先定，代码写得再对也是废数据。
二、开工前的四样准备
结论先记住：曝光定义、阈值、相对节点、销毁时机，四样没定就是给后面埋雷。
| 准备项 | 达标口径 | 常见错误 |
|---|---|---|
| 曝光定义 | 写清可见比例与停留时长，同一次浏览同一目标只计一次 | 没定义，曝光数虚高没人敢用 |
| 阈值 | 按用途分开设：懒加载提前触发，曝光严格判定 | 阈值过小，日志刷爆上报量失控 |
| 相对节点 | 指定实际滚动容器做参照，嵌套滚动按内层容器 | 默认相对视口，嵌套场景全部误报 |
| 销毁时机 | 页面卸载 disconnect，组件销毁同步断开 | 观察器一直挂着，滑得越多越卡 |
懒加载和曝光建议用两组观察器：懒加载阈值宽松（提前半屏触发），曝光阈值严格（完整露出加停留判定），混用一组参数两头不讨好。
三、实现步骤：五步把曝光与懒加载做准
结论先记住：顺序是「定口径 → 设阈值 → 懒加载 → 销毁 → 抽样校验」，校验环节最容易被跳过。
- 明确曝光口径：和数据同学写清「可见比例 ≥ 50% 且停留 500ms 计一次曝光，同一目标一次浏览只计一次」，落进接口文档。
- 设置合理阈值：懒加载用宽松阈值提前触发，曝光用严格阈值；阈值调整必须记录版本，方便归因上报量波动。
- 列表项懒加载图片：图片进入提前量范围才发起加载，先占位后替换；配合 体验评分优化 观察首屏与滑动帧率变化。
- 页面卸载 disconnect：onUnload 与组件销毁时断开全部观察器，复用组件时同样按生命周期管理，不留悬挂引用。
- 抽样校验曝光数：上线前人工滑三屏，对比实际上报条数与人工计数，误差明显时先查相对节点与阈值，再怀疑数据链路。
四、我们实地踩过的三个坑
结论先记住：日志刷爆、忘了销毁、把曝光当点击，是三类最常见的实现事故。
- 阈值过小刷爆日志：阈值设得接近 0，卡片路过就算曝光，上报量翻了几倍还把转化率稀释到没法看。口径收紧后数据才可用。
- 忘记销毁：详情页返回后观察器还挂着，继续对不可见节点回调，越滑越卡。销毁必须写进生命周期清单。
- 把曝光当点击归因：运营拿曝光数考核点击效果，两条链路混在一起算，结论完全失真。曝光是辅助指标，归因必须分开建表。
五、常见问题 FAQ
广告组件的曝光口径一样吗？
不一样，广告曝光口径单独一套：广告平台有自己的计费曝光规则，自建埋点结果不能混用，报表里分列展示。
嵌套滚动的页面观察器怎么设？
相对节点要对：观察器指定实际滚动的内层容器做参照，而不是默认视口，否则外层滚动也会触发内层曝光误报。
Skyline 渲染下表现有差异吗？
有，真机验证为准：渲染引擎不同，阈值行为与回调时机可能不一致，切到 Skyline 的项目要重跑一轮抽样校验。
这个功能和 GEO 地理位置配置有关系吗？
没有直接关系。本文讲的是端侧观察器与埋点；GEO 指小程序后台的地理位置配置（门店地址、经纬度、类目），影响「附近」检索展示，与按城市堆词的地域 SEO 无关。
验收时怎么判断达标？
三查：人工滑三屏的曝光数与上报数对得上；页面反复进出后内存与帧率稳定（观察器已销毁）；懒加载不抢首屏带宽。三条全过才算过。
