自动曝光方案对比

2021-11-19

实现方案

主要有三种：

监听Scroll方案
Intersection Observer方案
轮询

在开始之前，假设自己有一些工具方法

// 判断dom元素是否在视口中
const isElementInViewPort = (el) => { /* 返回一个布尔值 */ }
// 反复scroll会重复曝光，如何去重？ 判断是否在视口方法一
const isElementInViewport1 = (el: Element) => {
    // https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
    // https://developer.mozilla.org/zh-CN/docs/Web/API/Window/innerHeight  
    // window.innerHeight 属性为只读，且没有默认值 浏览器窗口的视口（viewport）高度（以像素为单位）；如果有水平滚动条，也包括滚动条高度。
    // window.innerWidth 返回以像素为单位的窗口的内部宽度，如果垂直滚动条存在，则这个属性将包括它的宽度。
};
// 判断是否在视口方法二
const isElementInViewport2 = (el: any) => {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;

    while(el.offsetParent) {
        el = el.offsetParent;
        top += el.offsetTop;
        left += el.offsetLeft;
    }

    return (
        top >= window.pageYOffset &&
        left >= window.pageXOffset &&
        top + height <= window.pageYOffset + window.innerHeight &&
        left + width <= window.pageXOffset + window.innerWidth
    );
};
//  把数据发送到服务器
const report = (value) => { /* 上报的逻辑 */ }

一、监听Scroll方案

<!-- html模板 -->
<div class="scroll-list">
    <div class="scroll-list-item" id="1"></div>
    <div class="scroll-list-item" id="2"></div>
    <div class="scroll-list-item" id="3"></div>
    <!-- ...省略 -->
    <div class="scroll-list-item" id="49"></div>
    <div class="scroll-list-item" id="50"></div>
</div>

const nodes = document.querySelectorAll('.scroll-list-item');
const nodesList = [...nodes];

// 针对scroll
window.addEventListener('scroll', () => {
    nodesList.forEach((element) => {
       // 如果有发送成功的标记，则直接return
       if(element.getAttribute('[has-exposed]')) return;        
       if (isElementInViewPort(element)) {
            const logValue = element.getAttribute('[data-expose]');
            sendLog(logValue);
            // 曝光成功之后，则打一个标记
            element.setAttribute('[has-exposed]', "1");
       }
    })
})

二、轮询（定时器）

因为方法一中，dom结构不同，并且方法不够通用，所以思考新的方式。
使用setInterval，则不用考虑元素是怎么出现的，只要出现在了屏幕中，则定时器会自动发现需要曝光的内容。

<div data-expose="商品1">...</div>
<div data-expose="商品2">...</div>
...

<div data-expose="点击出现的商品">...</div>
<button>显示商品</button>

const observeTimer = setInterval(() => {
    const elements = document.querySelectorAll('[data-expose]');
    const elementList = [...elements];
    elementList.forEach((element) => {
        // 如果有发送成功的标记，则直接return
        if (element.getAttribute('[has-exposed]')) return;

        if (isElementInViewPort(element)) {
            const logValue = element.getAttribute('[data-expose]')
            sendLog(logValue)
            // 曝光成功之后，则打一个标记
            element.setAttribute('[has-exposed]',  "1")
        }
    })
}, 500);

二、Intersection Observer方案

IntersectionObserver接口提供了一种异步观察目标元素与其祖先元素或顶级文档视窗（viewport）交叉状态的方法。

<!-- html模板 -->
<div class="scroll-list">
    <div class="scroll-list-item" id="1"></div>
    <div class="scroll-list-item" id="2"></div>
    <div class="scroll-list-item" id="3"></div>
    <!-- ...省略 -->
    <div class="scroll-list-item" id="49"></div>
    <div class="scroll-list-item" id="50"></div>
</div>

sendReport() {
    const nodes = document.querySelectorAll('.scroll-list-item');
    const intersectionObserver = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.intersectionRatio > 0) {
                const target = entry && entry.target;
                const id = target.getAttribute && target.getAttribute('id') || '';
                // 发送埋点的逻辑
                showLog('xxx', {
                    id: target.getAttribute && target.getAttribute('id') || '',
                });
            }
        });
    });
    nodes.forEach(node => {
        intersectionObserver.observe(node);
    });
},