曝光埋点大公开：从此让曝光埋点一键搞定

2023-11-10 09:18:25

前端性能优化中的曝光埋点

随着互联网的飞速发展，网页的加载速度和用户体验变得尤为重要。曝光埋点作为前端性能优化中不可或缺的手段，帮助我们洞悉用户在页面中的行为，从而优化加载速度和提升用户体验。

初探曝光埋点

起初，我着手开发一个曝光逻辑，以监听window.scroll滚动事件，并使用getBoundingClientRect()获取元素相对于视口的定位。当元素的底部属性小于或等于视口高度时，则认定元素已曝光。

// 监听滚动事件
window.addEventListener('scroll', () => {
  const elements = document.querySelectorAll('.曝光元素');
  elements.forEach((element) => {
    const rect = element.getBoundingClientRect();
    if (rect.bottom <= window.innerHeight) {
      // 元素已曝光
    }
  });
});

尽管初版逻辑简单易行，但它仅适用于没有固定定位的元素，一旦元素具备固定定位，逻辑便失效了。

进阶通用曝光逻辑

为了弥补初版的不足，我将曝光逻辑进行了优化，使其适用于各种定位情况。此外，我将逻辑封装成一个单独的类，便于维护和管理代码。

class Exposure {
  constructor(selector) {
    this.elements = document.querySelectorAll(selector);
    this.observer = new IntersectionObserver(this._observerCallback.bind(this));
    this.elements.forEach((element) => {
      this.observer.observe(element);
    });
  }

  _observerCallback(entries) {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        // 元素已曝光
      }
    });
  }
}

进一步完善API

虽然进阶逻辑更为强大，但初始化时需要传入大量参数，降低了代码可读性。为了解决这一问题，我简化了API，仅需传入元素选择器即可初始化组件。

// 初始化曝光埋点组件
const exposure = new Exposure('.曝光元素');

// 监听曝光事件
exposure.on('exposure', (element) => {
  // 元素已曝光
});

此外，我还添加了延迟曝光和批量曝光等新功能，满足不同场景的需要。

使用场景

目前，该组件已能够满足我项目中所有的曝光埋点需求，其API简单易用，代码健壮性高。欢迎大家在有曝光埋点需求时使用该组件。

// 初始化曝光埋点组件
const exposure = new Exposure({
  selector: '.曝光元素选择器'
});

// 监听曝光事件
exposure.on('exposure', (element) => {
  console.log('元素已曝光', element);
});