主要用到的API
MutationObserver
MutationObserver 主要提供了DOM节点增减以及属性变化检测的能力。从下图可看出大部分浏览器对该API支持良好。
demo源代码：https://stackblitz.com/edit/js-ew1sn1?file=index.js
在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元素的交叉状况，比如获取相交区域的比例值，后面做曝光埋点的判断需要用到。还可以获取其它信息，https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry
从下图可看出有些浏览器不支持该API，所以需要引入polyfill，https://github.com/w3c/IntersectionObserver/tree/main/polyfill
demo源代码：https://stackblitz.com/edit/js-ozzzjw?file=index.js
见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源代码：https://stackblitz.com/edit/react-hfq33n?file=src%2FApp.js
说明：
- 当模块露出大于等于50%时，会曝光埋点，demo中用log代替
- 当模块到可视范围之外，在进入可视范围露出大于等于50%时，会再次曝光埋点
- demo中，模块蓝边表示未曝光埋点，绿边表示已曝光埋点
