ResizeObserver 触发循环报错怎么定位：避免回调里反复改尺寸

页面里有一块自适应面板，窗口一缩放，控制台却反复出现 ResizeObserver loop completed with undelivered notifications.。这条消息不一定意味着浏览器真的卡死，但它说明尺寸回调和布局写操作之间存在需要拆开的链路。最容易复现的情况，是在观察回调里直接修改同一个元素的宽度。

先把“读尺寸”和“写尺寸”分开，再用实际尺寸去重；如果写操作必须触发下一轮布局，就把它放进 requestAnimationFrame，不要在当前 ResizeObserver 回调里连续改被观察元素。

先还原一次尺寸回调形成的回路

下面的例子故意把面板宽度改成“当前宽度加 1 像素”。它不是业务代码的推荐写法，却很适合说明问题：ResizeObserver 读到宽度后调用 measurePanel，而 measurePanel 又写回 panel.style.width。

const panel = document.querySelector('.panel');

const resizeObserver = new ResizeObserver((entries) => {
  const entry = entries[0];
  measurePanel(entry.contentRect.width);
});

function measurePanel(width) {
  panel.style.width = `${width + 1}px`;
}

resizeObserver.observe(panel);

这里的关键不是“加 1”这个数字，而是写操作的对象。观察对象是 panel，回调又改变了它的宽度，于是浏览器需要重新计算样式和布局，形成“再次通知”。规范会限制同一轮能继续派发的观察深度；如果仍有未交付通知，就把它留到后续绘制，并报告那条循环提示。

从控制台消息反推到底是哪一次写操作

不要看到错误就先给 ResizeObserver 加一个空的 catch。这个 API 的回调不是 Promise，真正要找的是回调里所有会影响布局的写操作：style.width、classList、改变文本导致换行，甚至给父节点追加内容。

先记录读到的尺寸，再暂时注释布局写入

const resizeObserver = new ResizeObserver((entries) => {
  const entry = entries[0];
  console.log('contentRect', entry.contentRect.width);
  // 暂时注释 panel.style.width 或 classList 改动
});

如果注释写操作后消息消失，问题边界就缩小到“尺寸观察回调改变布局”。如果消息仍在，继续查找其他 ResizeObserver、组件库的测量逻辑，以及是否存在多个观察器同时写同一块 DOM。

用 lastWidth 去重，并把写操作推到下一帧

修复的第一步是让相同宽度不再重复进入业务逻辑。第二步是把必须发生的写操作放到 requestAnimationFrame，让当前观察回调先结束。示例仍然沿用面板宽度，方便和前面的回路对照。

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

const resizeObserver = new ResizeObserver((entries) => {
  const width = Math.round(entries[0].contentRect.width);
  if (width === lastWidth) return;
  lastWidth = width;

  cancelAnimationFrame(frameId);
  frameId = requestAnimationFrame(() => {
    panel.classList.toggle('is-narrow', width 

这段代码没有在回调里改 panel.style.width，而是根据 contentRect 切换状态类。即便业务确实要调整布局，也应让写入动作只在尺寸阈值发生变化时执行，并保证下一次写入不会无条件制造新的尺寸变化。

修复后的验收不能只看错误消失

拖动窗口或连续改变父容器宽度，观察三件事：控制台不再持续刷循环提示；面板在断点附近只切换一次状态；组件销毁后，观察器和待执行帧都被释放。若仍然出现提示，给每个写操作加临时日志，记录写入前后的宽度和触发来源，通常能找到第二个隐藏观察器。

• 读：只从 contentRect 或 borderBoxSize 取得尺寸。
• 判：使用 lastWidth、阈值或状态比较，避免同值重复处理。
• 写：优先切换不改变几何尺寸的类；必须改尺寸时安排到 requestAnimationFrame。
• 收尾：在组件卸载时调用 cancelAnimationFrame 和 disconnect()。

常见问题

这条 ResizeObserver 报错一定会让页面卡死吗？

不一定。规范会限制当前通知循环，把未交付通知延后；但如果业务每帧都制造新的尺寸变化，页面仍可能持续抖动或耗费布局开销。

把回调包进 setTimeout 就能修好吗？

不应把它当作通用修复。定时器只能改变时序，不能消除“写入导致尺寸再次变化”的因果关系，优先做尺寸去重和布局写入收敛。

什么时候应该调用 disconnect？

观察器属于组件或页面模块时，在对应的销毁路径调用 disconnect()；如果还有待执行的 requestAnimationFrame，一起取消。

把尺寸观察收敛成一条可解释的链路

ResizeObserver 适合把组件从“窗口变化”中解耦出来，但回调本身仍处于布局更新链路里。保留清晰的读、判、写三段，写入只对真实状态变化负责，遇到循环提示时就能沿着这条链路定位，而不是靠沉默错误来掩盖问题。