主要用到的API
MutationObserver
MutationObserver 主要提供了DOM節(jié)點(diǎn)增減以及屬性變化檢測(cè)的能力。從下圖可看出大部分瀏覽器對(duì)該API支持良好。
demo源代碼：https://stackblitz.com/edit/js-ew1sn1?file=index.js
在demo中，當(dāng)點(diǎn)擊 add dom 和 remove dom 按鈕時(shí)，改變了DOM的結(jié)構(gòu)，當(dāng)點(diǎn)擊 change target attribute 按鈕時(shí)，改變了DOM的屬性值，都會(huì)觸發(fā) callback。callback 中可以獲取到 mutation 對(duì)象，比較主要的字段：
- type：改變的類型，childList、attributes
- addedNodes：增加的DOM
- removedNodes：移除的DOM
- target：DOM
IntersectionObserver
IntersectionObserver 主要用來檢測(cè)被監(jiān)聽的目標(biāo)元素可見部分與root元素的交叉狀況，比如獲取相交區(qū)域的比例值，后面做曝光埋點(diǎn)的判斷需要用到。還可以獲取其它信息，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] // 當(dāng)監(jiān)聽對(duì)象的任何閾值被越過時(shí)，都會(huì)生成一個(gè)通知(Notification)。
};
demo中的root是瀏覽器窗口，被監(jiān)聽的目標(biāo)元素是橫向的藍(lán)色塊和縱向的藍(lán)色塊。當(dāng)被監(jiān)聽的目標(biāo)元素可見部分與root元素交叉比例越過0 0.5 1時(shí)，會(huì)log對(duì)應(yīng)的信息。
requestIdleCallback
使用 requestIdleCallback 方法，瀏覽器會(huì)在空閑時(shí)執(zhí)行傳入的函數(shù)。后面埋點(diǎn)我們使用這個(gè)方法，避免埋點(diǎn)影響主業(yè)務(wù)。
曝光埋點(diǎn)實(shí)現(xiàn)
demo源代碼：https://stackblitz.com/edit/react-hfq33n?file=src%2FApp.js
說明：
- 當(dāng)模塊露出大于等于50%時(shí)，會(huì)曝光埋點(diǎn)，demo中用log代替
- 當(dāng)模塊到可視范圍之外，在進(jìn)入可視范圍露出大于等于50%時(shí)，會(huì)再次曝光埋點(diǎn)
- demo中，模塊藍(lán)邊表示未曝光埋點(diǎn)，綠邊表示已曝光埋點(diǎn)
