前端 ResizeObserver 反复触发怎么定位：布局回流、观察循环与稳定尺寸

仪表盘里的筛选面板一缩窄，右侧卡片就开始来回抖动：控制台反复打印同一个回调，CPU 占用也跟着升高。排查这类问题时，先别急着把 ResizeObserver 整段删掉；更常见的根因是回调读取了 contentRect.width，随后又写入会改变自身尺寸的样式，观察回调于是被自己再次唤醒。

定位重点是找出“读尺寸 → 写布局 → 尺寸再次变化”的闭环，再把写入合并到下一帧，并让样式写入趋于稳定；只要回调不再改变下一次观察到的尺寸，循环就会结束。

先把反复触发还原成一条证据链

下面是一个容易出问题的面板：面板变宽时把内部网格切成两列，变窄时切回一列。为了“让卡片更宽”，回调直接修改了面板本身的宽度，观察对象又正是这个面板。

const panel = document.querySelector(".filter-panel");
const observer = new ResizeObserver((entries) => {
  const width = entries[0].contentRect.width;
  panel.style.width = width > 720 ? "680px" : "760px";
});

observer.observe(panel);

当实际宽度为 700 像素时，回调写入 760 像素；下一次观察到的宽度又超过 720，于是写回 680 像素。两个目标值跨过了同一个判断阈值，形成了可重复的回路。这里最有价值的不是猜，而是给回调加临时计数和日志，记录观察到的宽度、分支和写入值。

用最小日志确认是不是尺寸振荡

调试阶段可以保留一个有限次数的记录器，避免控制台被刷满。注意记录的是观察条目的尺寸，不是 offsetWidth 之类的另一套盒模型数据，否则日志和实际触发条件可能对不上。

let callbackCount = 0;

const observer = new ResizeObserver(([entry]) => {
  callbackCount += 1;
  const width = Math.round(entry.contentRect.width);
  console.debug("resize", {
    callbackCount,
    width,
    branch: width > 720 ? "wide" : "compact"
  });
});

observer.observe(panel);

如果日志在两个或多个宽度之间交替，优先检查回调中所有会影响布局的写操作：style.width、classList、CSS 变量，以及会改变内容尺寸的文本或子节点。若宽度只打印一次，却感觉页面在抖，问题可能来自别的观察对象或 CSS 动画，不要把所有视觉变化都归到 ResizeObserver。

把布局写入推迟到下一帧并收敛目标值

修复时有两个动作。第一，观察回调只负责读取和安排更新，不在观察通知里立刻写布局；第二，计算出的目标值要有明确的稳定区间，而且写入前先比较当前值。

let frameId = 0;
let pendingWidth = null;

const observer = new ResizeObserver(([entry]) => {
  const width = Math.round(entry.contentRect.width);
  pendingWidth = width > 720 ? 680 : 700;

  cancelAnimationFrame(frameId);
  frameId = requestAnimationFrame(() => {
    const nextWidth = `${pendingWidth}px`;
    if (panel.style.width !== nextWidth) {
      panel.style.width = nextWidth;
    }
  });
});

observer.observe(panel);

这段代码把“读取”与“写入”分开了，但真正让它停下来的，是两个分支的目标值不再跨过判断边界：宽度大于 720 时写 680，其他情况写 700。写入后下一次观察仍会落在同一个分支，比较也会阻止相同的 style.width 再写一次。

如果面板本身不应该被回调改宽，更好的修复是只切换内部网格的 CSS 类，让观察对象负责报告容器状态，而不是同时充当布局控制器。

修复后怎样反向验证

先在 DevTools 中清空控制台，再重复拖动窗口和展开筛选面板。正常情况下，回调次数会随着真实尺寸变化增加，但不应在两个宽度之间无限交替；Performance 录制里也不应出现连续的脚本—布局—脚本长链。

• 尺寸不变时不应持续出现新的 resize 日志。
• 切换到宽布局后，面板宽度应停在 680 或 700 像素，而不是反复跨越 720 像素。
• 快速拖动窗口时，requestAnimationFrame 只保留最新一次待写入值。
• 组件销毁时调用 observer.disconnect()，防止旧面板继续持有观察关系。

相关问题

ResizeObserver 一定会造成无限循环吗？

不会。观察回调只读取尺寸，或写入后尺寸保持稳定时，通知会在变化停止后结束。只有回调持续改变观察对象或其布局祖先的尺寸，才需要重点排查回路。

为什么用了 requestAnimationFrame 仍然重复？

下一帧只改变执行时机，不会自动修复错误的目标值。如果 680 和 760 仍然让宽度跨过同一个阈值，回路依旧存在，还要调整分支边界或改为只更新内部布局。

disconnect 后还要取消 requestAnimationFrame 吗？

要。disconnect() 只解除观察关系，已经排队的帧回调仍可能执行。组件销毁时同时调用 cancelAnimationFrame(frameId)，并清空待写入值更稳妥。

小结

ResizeObserver 的反复触发通常不是浏览器“失控”，而是回调把读到的尺寸又写回了会改变尺寸的目标。用日志先证明宽度振荡，再拆开读取与写入、合并帧内更新、让目标值落在稳定区间，最后用回调次数和 Performance 记录确认回路确实消失。