正文

最近一直在開發(fā)可視化埋點(diǎn)系統(tǒng)，其中元素的曝光埋點(diǎn)，就是借助了 intersectionObserver 這個(gè)原生 api。也是網(wǎng)上推薦度比較高的方案，同時(shí) 2022 年，該 api 兼容性也已經(jīng)很高，同時(shí)也有 polyfill，基本上使用無虞。

intersectionObserver 本身 api 非常簡單，但是在實(shí)際使用的過程中，由于可視化埋點(diǎn)的一些特殊性以及對(duì)埋點(diǎn)準(zhǔn)確性的要求，還是遇到了一些 dom 變更后的邊緣場景，本文便是對(duì)這些邊緣場景的一個(gè)記錄及實(shí)現(xiàn)背后的一些考慮。

通常來講，元素的埋點(diǎn)是開發(fā)者主動(dòng)在元素中直接埋點(diǎn)，而筆者正在開發(fā)的可視化埋點(diǎn)，在數(shù)據(jù)收集側(cè)的工作，是異步從后臺(tái)獲取用戶需要的元素 xpath，然后再通過 xpath 尋找到元素，調(diào)用 intersectionObserver 的 observe 方法進(jìn)行監(jiān)聽元素的曝光。所以在進(jìn)行監(jiān)聽的時(shí)機(jī)上，都是在元素掛載到 dom 后進(jìn)行元素的監(jiān)聽，那么初次監(jiān)聽，是否會(huì)觸發(fā)其回調(diào)，便關(guān)系到曝光埋點(diǎn)的準(zhǔn)確性。

同時(shí)，可視化埋點(diǎn)也監(jiān)聽頁面 dom 的變更，當(dāng)變更后，需要解除舊元素的監(jiān)聽，同時(shí)增加對(duì)新元素的監(jiān)聽。那么如果多次監(jiān)聽同一元素，是否會(huì)多次觸發(fā)回調(diào)，也影響到曝光的準(zhǔn)確性。

設(shè)計(jì)方案

為了快速上線第一版，筆者最初的設(shè)計(jì)方案為：

• 根據(jù)服務(wù)端返回的 xpath，尋找到對(duì)應(yīng)的 dom 元素，對(duì)元素進(jìn)行 observe
• 監(jiān)聽 dom 變更事件，當(dāng) dom 發(fā)生改變后，重新根據(jù) xpath 尋找 dom 元素，對(duì)元素進(jìn)行再次 observe

在該方案中，存在幾個(gè)觸發(fā)時(shí)機(jī)可能導(dǎo)致的問題：

• 當(dāng)監(jiān)聽發(fā)生在元素渲染到頁面后，首次監(jiān)聽的同時(shí)，是否會(huì)觸發(fā)回調(diào)（影響到初次曝光的準(zhǔn)確性）
• 多次監(jiān)聽同一 dom 元素，是否會(huì)多次觸發(fā)回調(diào)（影響到 dom 變更，多次監(jiān)聽同一元素后，曝光的準(zhǔn)確性）

測驗(yàn)結(jié)論

• 當(dāng)初次監(jiān)聽元素時(shí)，會(huì)立即觸發(fā)一次回調(diào)
• 多次監(jiān)聽同一元素，并不會(huì)多次觸發(fā)回調(diào)

在上述邏輯成立的情況下，筆者最初的方案其實(shí)是可以正常工作，對(duì)于初次曝光，雖然發(fā)生在元素渲染到 dom 之后，但是由于會(huì)立即觸發(fā)一次，故初次曝光能夠正常上報(bào)。而當(dāng) dom 發(fā)生變更后，消失的元素，雖然沒有調(diào)用 unobserve，但是由于該元素消失了，并不會(huì)影響后續(xù)曝光埋點(diǎn)的上報(bào)，所以并沒有帶來大的問題，而 dom 變更后，元素如果依然存在，雖然再次進(jìn)行了監(jiān)聽，但是多次監(jiān)聽并不影響同一元素，所以其實(shí)也沒有問題。

對(duì)于第一版，上線后也確實(shí)能夠正常工作，但是對(duì)于沒有 unobserve 這一點(diǎn)，由于 js 的垃圾回收機(jī)制，必須是沒有引用后才會(huì)銷毀，而沒有 unobserve，那么內(nèi)部必然會(huì)維護(hù)一份監(jiān)聽的元素的列表，保留了已經(jīng)從 dom 中移除的元素的引用，從而造成內(nèi)存泄漏。

故需要做一些策略來避免該問題（不然代碼也會(huì)被吐槽），思路如下：

維護(hù)一份 xpath -> 元素的映射，當(dāng) dom 發(fā)生變更時(shí)，遍歷所有 xpath 尋找對(duì)應(yīng)的元素，

如果元素同映射中一致，那么表示該元素沒有發(fā)生變更，此時(shí)可以直接忽略，什么都不做。

而如果元素發(fā)生變化，那么調(diào)用 unobserve 取消舊元素的監(jiān)聽，同時(shí)對(duì)新元素進(jìn)行監(jiān)聽即可。

完整的偽代碼

// 工具函數(shù)命名很清晰，含義不贅述
import { getEleByXpath, getXpathByEle, debounce } from 'utils'; 
class track {
    constructor() {
        /* 
        {
            xpath: '',
            id: ''id
        }
        */
        this.config = {} // 存儲(chǔ)遠(yuǎn)程服務(wù)端返回的埋點(diǎn) xpath 信息
        /*
            [xpath]: el,
        */
        this.map = {} // 維護(hù)的 xpath -> el 映射
        this.observer = null; // intersectionObserver 實(shí)例
    }
    // 遠(yuǎn)端獲取需要曝光點(diǎn)的元素
    getConfig() {
        return fetch('xxx').then(res => {
            this.config = res;
            this.config.forEach(item => {
                // 初始化 xpath -> el 映射
                this.map[item.xpath] = null;
            })
        });
    }
    // 監(jiān)聽 dom 變更
    addDomtreeMutatorObserver() {
        // 不關(guān)心屬性變化
        const config = { attributes: false, childList: true, subtree: true };
        // 監(jiān)聽dom變更，消個(gè)抖
        const observer = new MutationObserver(debounce(this.observe.bind(this), 200));
        observer.observe(document.body, config);
    }
    // 監(jiān)聽元素曝光
    observe() {
        // 此處可以加個(gè) requestIdleCallback 來增強(qiáng)性能
        this.config.forEach((item) => {
            const targetEl = getEleByXpath(item.xpath);
            // 新舊元素不一致才需要取消舊元素監(jiān)聽，增加新元素監(jiān)聽
            if (targetEl !== this.map[item.xpath]) {
                // 元素存在，就監(jiān)聽
                if (targetEl) {
                    this.observer.observe(targetEl);
                }
                // 取消舊元素的監(jiān)聽
                if (this.map[shadow.xpath]) {
                    this.observer.unobserve(this.map[shadow.xpath]);
                }
                // 更新map中的el
                this.map[shadow.xpath] = targetEl;
            }
            // 一致，則什么都不做
        });
    }
    // 創(chuàng)建 intersectionObserver
    initObserver() {
        const callback = (entries) => {
            entries.forEach((entry) => {
                if (entry.intersectionRatio > 0.2) {
                    const targetXpath = getXpath(entry.target);
                    for (let i = 0; i < this.config.length; i++) {
                        if (this.config[i].xpath === targetXpath) {
                            // xpath一致
                            // 發(fā)送曝光埋點(diǎn)
                        }
                    }
                }
            });
        };
        const observer = new IntersectionObserver(callback, {
            threshold: 0.2,
        });
        this.observer = observer;
    }
    init() {
        this.getConfig().then(() => {
            // 初始化 intersectionObserver
            this.initObserver();
            // 監(jiān)聽元素
            this.observe();
            // 監(jiān)聽 dom 元素變更
            this.addDomtreeMutatorObserver();
        });
    }
}

以上便是精簡后的偽代碼，其核心的優(yōu)化點(diǎn)便是維護(hù) xpath -> el 的 map（說實(shí)話，一開始筆者其實(shí)就想到了 map，但是當(dāng)時(shí)想的是拿 dom 引用作為 key，拿對(duì)象做 key 顯然是行不通的，就短暫放棄，先上線再說。后來想到用 xpath 做key，才有了這篇文章）。

其實(shí)本文的初衷是記錄一下 intersectionObserver 的一些邊緣情況及結(jié)論（其實(shí)還對(duì) intersectionObserver 做了其他一些比較傻的測試），但是在文章編寫的過程中發(fā)現(xiàn)干巴巴的分析，顯得實(shí)在是無趣，故夾雜了實(shí)際的可視化埋點(diǎn)曝光采集的業(yè)務(wù)場景，希望沒有寫的很亂。

同時(shí)，當(dāng)筆者徹底理清思路后，發(fā)現(xiàn)這優(yōu)化其實(shí)不值一提，只是筆者最初在設(shè)計(jì)可視化埋點(diǎn)方案時(shí)，由于對(duì)這些 api 的不熟悉，導(dǎo)致的一些迷迷糊糊的摸爬滾打經(jīng)驗(yàn)，還望懂的同學(xué)別笑。

以上就是可視化埋點(diǎn)平臺(tái)元素曝光采集intersectionObserver思路實(shí)踐的詳細(xì)內(nèi)容，更多關(guān)于intersectionObserver元素曝光采集的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論