当前位置：首页 > 文章列表 > 文章 > 前端 > ResizeObserver 如何只观察可见组件避免重复计算

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

来源：17golang原创 2026-09-15 12:21:11 0浏览收藏

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

要点速览

可见性观察和尺寸观察是两层关系，不要让 ResizeObserver 直接覆盖整棵长列表。
用 requestAnimationFrame 合并同一帧通知，用 WeakMap 记录上一次宽高。
离开视口调用 unobserve，组件卸载时 disconnect，避免观察者持有无效目标。

ResizeObserver 与 IntersectionObserver 控制可见组件的前端静态结构框图 — 图1：可见性边界、尺寸观察边界和卡片组件之间的静态关系示意图，不代表真实运行截图。

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

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 尺寸缓存与 requestAnimationFrame 批处理的前端静态结构框图 — 图2：尺寸通知、待处理集合、尺寸缓存和布局计算之间的静态关系示意图，不代表真实运行结果。

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

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

现象	优先检查	处理方式
所有卡片都在回调	是否一开始观察了整列表	让 IntersectionObserver 控制 observe
同尺寸反复重绘	是否保存上一次宽高	用 WeakMap 比较尺寸键
出现 loop completed	回调是否修改自身尺寸	拆到下一帧并设置幂等条件

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

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

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

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

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