ResizeObserver 如何只观察可见组件避免重复计算

长列表里的卡片常常只在进入视口后才真正需要自适应布局。如果一开始就把所有卡片交给 ResizeObserver，每次窗口变化、字体加载或容器重排都可能触发大量无用计算。比较稳妥的做法是把职责拆开：IntersectionObserver 负责判断“现在是否可见”，ResizeObserver 只负责已经可见的元素；回调内部再用一帧批处理和尺寸缓存去重。

一、先把可见性和尺寸观察拆成两层

IntersectionObserver 的 isIntersecting 只能回答元素是否与根相交，它不等同于“业务上已经完成渲染”。这里把它当作一个低成本的观察资格开关：进入列表根容器就 observe，离开就 unobserve。如果列表自身滚动，应把列表容器传给 root，不要默认使用整个窗口。

先准备两个观察者和一份状态表：

const sizeObserver = new ResizeObserver(handleResize);
const visibilityObserver = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    const card = entry.target;
    if (entry.isIntersecting) {
      // 只有进入列表根容器的卡片才开始接收尺寸通知。
      sizeObserver.observe(card, { box: "border-box" });
    } else {
      // 离开可见范围后停止观察，避免长列表持续产生回调。
      sizeObserver.unobserve(card);
    }
  }
}, { root: document.querySelector(".card-list"), rootMargin: "120px 0px" });

const lastSize = new WeakMap();
document.querySelectorAll(".card").forEach((card) => visibilityObserver.observe(card));

rootMargin 留出预热区，适合需要提前调整布局的卡片；它不是把全部节点重新交给 ResizeObserver。若组件使用虚拟列表，还应让虚拟列表的挂载和销毁逻辑成为最终边界。

二、只对可见组件执行尺寸计算

ResizeObserver 回调可能一次收到多个条目。不要在循环里直接做昂贵的 DOM 查询、图表重绘或同步布局测量，而是把条目放入一个批次，交给下一帧统一处理。这样即使同一帧内父子容器都变化，也只安排一次计算。

const pendingCards = new Set();
let frameId = 0;

function handleResize(entries) {
  for (const entry of entries) {
    // 这里只登记变化目标，不在观察回调中反复改布局。
    pendingCards.add(entry.target);
  }
  if (!frameId) {
    frameId = requestAnimationFrame(flushResize);
  }
}

function flushResize() {
  frameId = 0;
  for (const card of pendingCards) {
    const rect = card.getBoundingClientRect();
    const key = `${Math.round(rect.width)}x${Math.round(rect.height)}`;
    const previous = lastSize.get(card);
    if (previous === key) continue;
    // 先写入缓存，再执行依赖宽高的业务计算，避免同值重复进入。
    lastSize.set(card, key);
    updateCardLayout(card, rect.width, rect.height);
  }
  pendingCards.clear();
}

这里的 getBoundingClientRect() 只用于得到最终布局尺寸；如果 contentRect 已经能满足业务，就把宽高直接从通知中传入，减少一次读取。updateCardLayout 不要无条件修改会影响自身尺寸的样式，否则可能重新触发观察回调。

三、用尺寸缓存挡住重复计算

重复计算通常不是 ResizeObserver 本身“重复观察”，而是业务层没有判断尺寸是否真的改变。上面的键只保留整数像素，适合对小数变化不敏感的卡片；如果画布或精细排版依赖小数，应保留更高精度，或者改用 entry.contentBoxSize 的 inlineSize 与 blockSize。

四、离开视口与卸载时都释放观察者

离开视口时只需要停止该元素的尺寸观察；整组组件卸载时则要停止可见性观察、取消尚未执行的帧，并清空待处理集合。WeakMap 不提供遍历和手动清空，但它不会像普通 Map 一样因为缓存键而让已卸载元素长期留在业务结构中。

function destroy() {
  // 取消尚未执行的批处理，防止卸载后继续访问卡片节点。
  if (frameId) cancelAnimationFrame(frameId);
  frameId = 0;
  pendingCards.clear();
  // 释放两个观察者持有的目标集合。
  visibilityObserver.disconnect();
  sizeObserver.disconnect();
}

window.addEventListener("pagehide", destroy, { once: true });

检查时可以在开发环境临时统计 handleResize 收到的条目数、flushResize 的执行次数和当前可见卡片数，重点看滚动到长列表底部后，离开根容器的节点是否不再进入尺寸批次。线上不要把这些调试输出当成业务逻辑。

常见问题

只用 ResizeObserver，不判断可见性可以吗？

可以，但长列表会让不可见节点也参与尺寸通知。只有组件数量小、每次计算很轻时，这种简单方案才更合适。

元素刚进入视口为什么仍然没有立即计算？

观察资格和尺寸回调是异步通知，且示例把业务计算放到了下一帧。需要首屏同步尺寸时，应在挂载阶段先完成一次明确的初始化，再让观察者处理后续变化。

rootMargin 越大越好吗？

不是。它扩大的是提前观察区域，会增加同时活跃的组件数。应根据滚动速度、卡片计算成本和预加载距离做小范围调整。