如何在不拖慢网站运行速度的前提下完成商品曝光数据采集

• 每个指令实例都独立创建IntersectionObserver，数千个商品对应数千个观测实例，完全违背了IntersectionObserver单实例观测多目标的设计优势，内存开销极大
• isVisible方法每次触发曝光时都会额外新建临时IntersectionObserver，滚动过程中会短时间生成大量临时观测实例，进一步加重主线程压力
• 每个指令维护独立的Subject和订阅流，数千个订阅同时触发时会造成事件循环阻塞
• 重复的可见性判断逻辑：外层观测已经配置了对应threshold，二次判断完全冗余

1. 全局复用单例IntersectionObserver #

通过Angular服务封装全局唯一的观测实例，所有商品指令统一注册观测目标，数千个元素仅需要1个观测实例。

2. 移除冗余的二次可见性检测 #

直接使用全局观测实例返回的entry参数判断可见性，删除isVisible方法内的临时观测逻辑。

3. 统一事件流处理 #

将所有曝光事件汇聚到全局统一的流中做防抖、过滤处理，避免每个指令单独维护订阅。

4. 优化上报逻辑 #

将曝光数据攒批上报，减少网络请求对主线程的阻塞。

首先创建全局的观测服务：

@Injectable({ providedIn: 'root' })
export class ExposureObserverService implements OnDestroy {
  private observer: IntersectionObserver | null = null;
  private exposureSubject = new Subject<HTMLElement>();
  // 可根据业务调整防抖时间
  private debounceTime = 200;

  constructor() {
    if (typeof window === 'undefined') return;
    // 全局统一配置观测参数
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        // 满足可见条件时才推入事件流
        if (entry.isIntersecting || entry.intersectionRatio >= 0.5) {
          this.exposureSubject.next(entry.target as HTMLElement);
          // 触发后立即取消观测，避免重复触发
          this.observer?.unobserve(entry.target);
        }
      });
    }, {
      rootMargin: '0px',
      threshold: 0.5 // 可根据业务调整，一半露出就算曝光
    });

    // 统一做防抖、批量处理
    this.exposureSubject.pipe(
      debounceTime(this.debounceTime),
      bufferTime(1000), // 攒1秒的曝光数据批量上报
      filter(events => events.length > 0)
    ).subscribe(elements => {
      // 批量上报曝光数据逻辑
      this.reportExposure(elements);
    });
  }

  observe(element: HTMLElement) {
    this.observer?.observe(element);
  }

  unobserve(element: HTMLElement) {
    this.observer?.unobserve(element);
  }

  private reportExposure(elements: HTMLElement[]) {
    // 提取元素对应的商品ID等参数，统一上报
    const exposureData = elements.map(el => el.dataset.goodsId);
    // 执行上报逻辑
    console.log('批量上报曝光:', exposureData);
  }

  ngOnDestroy() {
    this.observer?.disconnect();
    this.exposureSubject.complete();
  }
}

然后简化指令逻辑：

@Directive({ selector: '[appExposure]' })
export class ExposureDirective implements OnInit, OnDestroy {
  @Input() goodsId: string = '';

  constructor(
    private elementRef: ElementRef<HTMLElement>,
    private exposureService: ExposureObserverService
  ) {}

  ngOnInit() {
    // 把商品ID挂载到元素dataset上，方便上报时提取
    this.elementRef.nativeElement.dataset.goodsId = this.goodsId;
    this.exposureService.observe(this.elementRef.nativeElement);
  }

  ngOnDestroy() {
    this.exposureService.unobserve(this.elementRef.nativeElement);
  }
}

• 如果使用虚拟滚动，在元素被回收时主动调用unobserve，减少观测目标数量
• 业务允许的前提下适当降低threshold阈值，减少观测触发的灵敏度
• 避免在曝光回调中执行复杂计算逻辑，所有重逻辑都放到异步队列或者worker中处理

内容的提问来源于stack exchange，提问作者Naman Jain