当前位置：首页 > 文章列表 > 文章 > 前端 > ResizeObserver 触发循环报错怎么定位：避免回调里反复改尺寸

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

来源：17golang原创 2026-08-28 08:51:32 0浏览收藏

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

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

要点速览

ResizeObserver 观察的是尺寸变化，不是普通的点击事件。
回调里直接写 panel.style.width，可能让下一次布局再次触发同一个观察器。
用 contentRect.width 和 lastWidth 去重，并把必要写操作安排到下一帧。
修复后要同时观察控制台、布局稳定性和卸载时的 disconnect()。

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

下面的例子故意把面板宽度改成“当前宽度加 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);

ResizeObserver 调用 measurePanel 后写入 panel.style.width，布局再次触发尺寸通知的控制流

这里的关键不是“加 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

contentRect 经过 lastWidth 去重后进入 requestAnimationFrame，再更新 is-narrow 状态的稳定数据路径