ResizeObserver 回调中修改尺寸为什么会循环触发

ResizeObserver 回调里如果直接修改被观察元素的宽度、高度，或者修改了会反过来撑开它的子内容，回调就可能再次收到通知。问题不在于“监听器失控”，而在于读尺寸和写布局形成了反馈链：本次写入改变盒子尺寸，下一轮布局又把变化交回同一个回调。

修复的关键是让写入结果收敛：把布局写操作放到 requestAnimationFrame 中，并在写入前比较当前尺寸与期望尺寸；如果只是根据容器宽度切换样式，优先使用 CSS 容器查询，不要在回调中继续改被观察盒子。

一、先判断循环是怎么形成的

ResizeObserver 观察的是元素的 content box、border box 或设备像素 content box，观察开始时也可能收到一次通知。浏览器会在绘制前处理尺寸通知；回调中改变样式后，样式和布局需要重新计算，于是同一个元素可能再次进入通知队列。

最危险的是下面三类写入：直接给 entry.target.style.width 或 height 赋值；改变子元素内容、字体或间距，使父元素重新计算；修改百分比、flex 或 grid 相关约束，让另一个被观察节点反过来影响当前节点。控制台常见的 ResizeObserver loop completed with undelivered notifications 只是浏览器把未能在本轮交付的通知推迟了，并不代表循环已经消失。

二、把读取与写入拆到一帧里

第一步不要在回调里连续读取布局、修改样式、再立即读取布局。可以把同一帧内的通知合并到一个 requestAnimationFrame，只保留每个目标的最新 entry。这样做是调度边界，不是收敛保证；最终仍要让写入后的尺寸满足停止条件。

const pending = new Map();
let frameId = 0;

const observer = new ResizeObserver((entries) => {
  // 同一帧可能收到多次通知，只保留每个元素的最新尺寸。
  for (const entry of entries) pending.set(entry.target, entry);
  if (frameId) return;

  frameId = requestAnimationFrame(() => {
    // 先取快照再清空，避免本轮写入影响当前遍历。
    const current = [...pending.values()];
    pending.clear();
    frameId = 0;

    for (const entry of current) {
      // 新旧浏览器都能读取：优先使用 contentBoxSize，退回 contentRect。
      const box = entry.contentBoxSize?.[0];
      const width = box ? box.inlineSize : entry.contentRect.width;
      const nextWidth = Math.max(320, Math.min(720, Math.round(width)));

      // 目标值已经满足时不写 style，切断尺寸反馈链。
      if (Math.round(width) === nextWidth) continue;
      entry.target.style.width = `${nextWidth}px`;
    }
  });
});

// 只观察真正需要根据自身盒子调整的组件。
observer.observe(document.querySelector('.panel'), { box: 'content-box' });

这个例子把宽度限制在 320 到 720 像素。若当前宽度是 260，下一次写入 320 后就满足条件；若当前宽度已经在范围内，则不再写入。不要把“每次回调加 10 像素”当成修复，那会让尺寸永远没有稳定目标。

三、用稳定目标替代“回调里继续改尺寸”

如果组件确实需要根据测量结果改尺寸，可以用 WeakMap 保存期望值。比较时同时看当前测量值和上次写入值，避免小数舍入、滚动条出现或字体加载导致反复写入。写入子元素也要谨慎：子元素的内容变化可能撑大父元素，形成间接循环。

如果只是“容器宽时显示完整工具栏，容器窄时隐藏标题”，这属于样式响应，不必由 ResizeObserver 驱动。给容器设置 container-type: inline-size，再用 @container 切换布局，通常能直接消除 JavaScript 的读写闭环。

.card-shell {
  /* 让组件自身成为容器查询的尺寸参考。 */
  container-type: inline-size;
}

@container (max-width: 480px) {
  .card-shell .card-title {
    /* 只切换表现，不在观察回调里改容器宽度。 */
    display: none;
  }
}

四、复查错误是否真的停止

一次错误事件不一定说明页面会持续抖动。可以在开发环境记录回调次数和关键尺寸；如果每帧都增长，说明目标函数仍不收敛。组件卸载或节点替换时调用 unobserve 或 disconnect，避免旧节点继续触发逻辑。

let callbackCount = 0;

window.addEventListener('error', (event) => {
  // 只记录 ResizeObserver 的循环提示，避免吞掉其他运行时错误。
  if (event.message.includes('ResizeObserver')) {
    console.warn('尺寸观察仍在产生反馈', { count: ++callbackCount });
  }
});

// 组件销毁时解除观察，避免保留无效节点和回调引用。
function dispose(panel) {
  observer.unobserve(panel);
}

相关问题

requestAnimationFrame 能彻底解决循环吗？

不能。它只把写入推迟到下一帧；如果每帧仍然改变被观察尺寸，循环会继续，只是错误发生在后续帧。

为什么改子元素也会触发 ResizeObserver？

因为子元素的内容、字体、间距或滚动条可能改变父元素的可用尺寸。排查时要沿着布局树检查间接影响，不要只搜索对 entry.target 的赋值。