ResizeObserver 循环怎么配置或排查

ResizeObserver 循环通常不是监听器“自己坏了”，而是回调读取尺寸后又写入了会影响布局的样式，下一轮尺寸变化再次触发回调。先把回调里的写操作移出当前布局通知，并在写入前比较目标值；如果业务并不需要改变被观察节点，就改为更新 CSS 变量或另一个展示节点。这样既能消除持续抖动，也不会把一次正常的延迟通知误判成浏览器故障。

看到 ResizeObserver loop completed with undelivered notifications 时，先找“回调写了谁”。只要写入会改变观察目标、父子节点或同一布局链上的元素，就要打断这条反馈环。

为什么 ResizeObserver 会形成尺寸反馈环

浏览器会在绘制前处理尺寸通知。回调中如果把 entry.contentRect.width 换算成新的 style.width，这次写样式会让布局重新计算；重新计算后的尺寸又进入下一轮观察。父元素改变 padding、子元素切换 class、字体大小变化，也可能间接走回同一条路径。

规范会按 DOM 深度逐轮处理通知，把暂时没处理的通知推迟到下一次绘制，并在窗口上报告错误。偶尔出现一次且随后稳定，说明布局在收敛；每帧都出现并伴随宽高变化，才是需要修复的反馈环。

先用最小代码确认到底写了哪个尺寸

排查时不要先给全局 error 监听器加白名单。给每次回调加计数，打印目标元素、当前宽度和准备写入的值，重点检查观察盒模型是否和读取字段一致。下面的示例只在新宽度确实不同的时候写入，并保留中文注释说明判断边界：

const panel = document.querySelector('.panel');
let callbackCount = 0;
let lastWidth = null;

const observer = new ResizeObserver((entries) => {
  // 计数只用于定位抖动来源，不要把计数器当成修复方案。
  callbackCount += 1;
  const entry = entries[0];
  const width = Math.round(entry.contentRect.width);
  const nextWidth = Math.max(240, width - 32);

  console.log({ callbackCount, width, nextWidth });
  // 相同值不重复写入，避免无意义的布局重新计算。
  if (nextWidth === lastWidth) return;
  lastWidth = nextWidth;
  panel.style.setProperty('--content-width', `${nextWidth}px`);
});

// 只观察内容盒；若依据边框总尺寸布局，应改用 { box: 'border-box' }。
observer.observe(panel, { box: 'content-box' });

这里仍然要观察 --content-width 最终是否影响 .panel 本身。如果 CSS 把这个变量用于面板宽度，环仍然存在，只是写入形式变了。更稳妥的做法是让变量只控制内部子节点，或者将“测量节点”和“展示节点”拆开。

有意调整尺寸时，怎样把循环推迟到下一帧

某些组件确实需要根据容器宽度调整内部布局。这时可以在回调中只收集最新条目，把 DOM 写入安排到 requestAnimationFrame。同时取消前一次尚未执行的帧，防止连续通知堆积：

let frameId = 0;
const observer = new ResizeObserver((entries) => {
  const entry = entries[0];
  const width = Math.round(entry.contentRect.width);

  // 一帧只保留最后一次测量，避免同一帧重复安排布局写入。
  cancelAnimationFrame(frameId);
  frameId = requestAnimationFrame(() => {
    const columns = width >= 960 ? 4 : width >= 640 ? 2 : 1;
    // 只改变内部网格，避免再次改变被观察容器的宽度。
    entry.target.style.setProperty('--columns', columns);
  });
});

observer.observe(document.querySelector('.dashboard'));

requestAnimationFrame 只能把写入移到下一帧，不能让一个永远增长的宽度自动停止。若回调每次都把目标加 10px，循环会继续，只是错误从当前批次延后。真正的停止条件仍然是“写入不再改变观察到的尺寸”。

持续报错时的排查清单与收敛判断

也可以临时监听窗口错误以确认消息来源，但不要用它掩盖真实循环：

window.addEventListener('error', (event) => {
  // 只记录 ResizeObserver 的浏览器提示，其他错误继续交给默认处理器。
  if (event.message.includes('ResizeObserver loop')) {
    console.warn('ResizeObserver 通知被延后', event.message);
  }
});

最后做一次稳定性判断：连续若干帧的目标宽高相同、回调计数不再增长，且页面没有闪烁，就说明布局已经收敛。生产代码还应在组件销毁时调用 disconnect()，避免保留不再使用的观察关系。

常见问题

ResizeObserver loop 错误一定是业务 bug 吗？

不一定。一次性的延迟通知可能来自正常的嵌套布局变化；只有错误持续出现并伴随尺寸反复改变，才说明代码形成了未收敛的反馈环。

用 window.onerror 过滤这条消息可以吗？

它只能减少监控噪声，不能停止布局循环。应先让回调写入幂等、延后或指向独立节点，再决定是否对已知的一次性提示降噪。

contentRect 和 borderBoxSize 怎么选？

内容区布局用 contentRect 或 content-box；需要把 padding 与 border 纳入判断时使用 border-box，并让观察选项和业务计算保持一致。

排查 ResizeObserver 的核心不是换一个监听 API，而是画出“测量对象—写入对象—下一次尺寸变化”的关系。只要这条关系没有回到同一个布局节点，循环就能自然收敛。