IntersectionObserver 观察大量元素时如何拆分

页面里有几百个卡片、图片或埋点目标时，最稳妥的拆分方式不是“一个元素配一个 IntersectionObserver”，而是先按 root、threshold 和业务动作分组。同一组目标共用一个观察器，回调只消费批量 entries；只有滚动容器或阈值确实不同，才创建新的观察器。

为什么大量目标不应该一项一个观察器

IntersectionObserver 的回调本来就会一次收到多个 IntersectionObserverEntry，每个 entry 对应一次阈值变化。大量目标共用观察器，可以把“观察条件”与“业务对象”分开管理；反过来，如果每个卡片都创建一个实例，销毁、调参和排查都会变成很多份相似状态。

先建立一个最小的分组工厂：同一组使用相同的 root、rootMargin、threshold，目标只通过 observe 加入。回调不要扫描整个页面，而是从 entry.target 取出当前目标。

// 同一组只创建一个观察器，entry.target 负责定位业务节点
function createObserver({ root, rootMargin = "0px", threshold = 0, onEnter }) {
  return new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      // 只处理进入状态，避免重复触发已经离开的目标
      if (entry.isIntersecting) onEnter(entry.target, entry);
    });
  }, { root, rootMargin, threshold });
}

const imageObserver = createObserver({
  root: null,
  rootMargin: "300px 0px",
  threshold: 0,
  onEnter: (target) => {
    target.src = target.dataset.src;
    imageObserver.unobserve(target); // 一次加载后移出观察集合
  }
});

按 root 和业务阈值决定拆分边界

拆分的第一条硬边界是 root。视口目标可以使用 null，而位于独立滚动区域里的目标，root 必须是它的祖先滚动容器。第二条边界是业务动作：提前加载图片适合正的 rootMargin，统计“至少可见一半”则应使用 threshold: 0.5。这两种条件混在一起，回调里就很难判断一次进入到底代表预加载还是曝光。

例如页面有主列表和侧栏两个滚动区域，可以保留两个观察组；主列表里的图片再按“预加载”和“曝光”分为两个配置。分组数量应该由条件组合决定，而不是由元素数量决定。

// 观察器只绑定自己的 root；目标必须位于对应容器内部
const listRoot = document.querySelector("#article-list");
const asideRoot = document.querySelector("#recommendations");

const listExposureObserver = createObserver({
  root: listRoot,
  threshold: 0.5,
  onEnter: (target, entry) => {
    // data-id 是业务标识，ratio 用于记录本次观察结果
    console.log("list-exposure", target.dataset.id, entry.intersectionRatio);
  }
});

const asideExposureObserver = createObserver({
  root: asideRoot,
  threshold: 0.5,
  onEnter: (target) => {
    console.log("aside-exposure", target.dataset.id);
  }
});

用证据判断拆分是否真的生效

不要只看回调有没有输出。给每个观察组保留名称和目标计数，日志至少包含组名、data-id、isIntersecting 与 intersectionRatio。如果侧栏目标出现在主列表组里，通常是注册时传错 observer；如果提前加载没有发生，先查 rootMargin 是否属于预加载组，而不是先把阈值改成更小。

一次性目标加载完成后调用 unobserve(target)；组件卸载时对每个组调用 disconnect()。这样能确认拆分不仅“看起来有多个实例”，而且目标集合和生命周期都闭合。

常见问题

观察器数量越少越好吗？

不是。只要 root、阈值或业务动作不同，就应拆开；真正要避免的是按元素盲目复制相同配置。

entries 一次有多个目标正常吗？

正常。回调接收的是批量 entry，处理时以 entry.target 和 entry.time 判断目标与时间，不要假设一次回调只对应一个元素。

什么时候调用 disconnect？

组件或页面区域销毁时调用；单个目标完成一次任务时优先用 unobserve，避免影响同组其他目标。