Web曝光埋点实现原理Web曝光埋点实现原理，主要用到的API：MutationObserver、Intersectio

主要用到的API

MutationObserver

MutationObserver 主要提供了DOM节点增减以及属性变化检测的能力。从下图可看出大部分浏览器对该API支持良好。

兼容性.png

demo效果：js-ew1sn1.stackblitz.io/

在demo中，当点击 add dom 和 remove dom 按钮时，改变了DOM的结构，当点击 change target attribute 按钮时，改变了DOM的属性值，都会触发 callback。callback 中可以获取到 mutation 对象，比较主要的字段：

type：改变的类型，childList、attributes
addedNodes：增加的DOM
removedNodes：移除的DOM
target：DOM

IntersectionObserver

IntersectionObserver 主要用来检测被监听的目标元素可见部分与root元素的交叉状况，比如获取相交区域的比例值，后面做曝光埋点的判断需要用到。还可以获取其它信息，developer.mozilla.org/zh-CN/docs/…

从下图可看出有些浏览器不支持该API，所以需要引入polyfill，github.com/w3c/Interse…

兼容性.png

demo源代码：stackblitz.com/edit/js-ozz…

demo效果：js-ozzzjw.stackblitz.io/

见demo源代码中的options

let options = {
  root: null,
  rootMargin: '0px',
  threshold: [0, 0.5, 1] // 当监听对象的任何阈值被越过时，都会生成一个通知(Notification)。
};

demo中的root是浏览器窗口，被监听的目标元素是横向的蓝色块和纵向的蓝色块。当被监听的目标元素可见部分与root元素交叉比例越过0 0.5 1时，会log对应的信息。

requestIdleCallback

使用 requestIdleCallback 方法，浏览器会在空闲时执行传入的函数。后面埋点我们使用这个方法，避免埋点影响主业务。

曝光埋点实现

demo源代码：stackblitz.com/edit/react-…

demo效果：react-hfq33n.stackblitz.io/

说明：

当模块露出大于等于50%时，会曝光埋点，demo中用log代替
当模块到可视范围之外，在进入可视范围露出大于等于50%时，会再次曝光埋点
demo中，模块蓝边表示未曝光埋点，绿边表示已曝光埋点