ResizeObserver 循环通知的布局修复

ResizeObserver 出现循环通知，通常不是浏览器“多调用了一次”，而是回调里的布局写入又改变了被观察尺寸：观察到尺寸变化，回调修改宽高或会影响宽高的样式，下一轮布局再次产生变化，于是通知不断回来。修复的关键是切断这个反馈环，而不是简单忽略控制台提示。

实际项目里我会把处理拆成三层：先读取 ResizeObserverEntry，再计算与上次不同的目标值，最后把一次性的布局写入合并到下一帧。这样既保留自适应布局，也不会让回调无条件改写自己观察的尺寸。

先找到会回写尺寸的那条边

ResizeObserver 的回调发生在浏览器绘制前。回调只读尺寸并更新不影响布局的状态，一般不会形成循环；危险的是下面这些写操作：给被观察元素设置 width、height、padding，修改会改变父子布局的字体或内容，或者把测量结果直接写回同一个尺寸属性。

可以先给回调保留一个很短的计数日志，观察它是否在尺寸不变时仍然写样式。不要把“ResizeObserver loop completed with undelivered notifications”当成要屏蔽的错误，它更像是反馈环的信号：浏览器会尝试把更深层的元素延后处理，但代码里的循环关系仍然需要修。

用相等判断阻止无意义的布局写入

第一步修复是让“没有变化”真正结束。回调可以使用 contentBoxSize 的 inlineSize，旧环境再回退到 contentRect.width。计算出的值要先与上次写入值比较，只有发生变化才更新 CSS 自定义属性或其它布局状态。

const panel = document.querySelector('.panel');
let lastInlineSize = -1;

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    // 优先读取内容盒尺寸，兼容旧实现时再退回 contentRect。
    const box = entry.contentBoxSize;
    const inlineSize = box
      ? (box[0] ? box[0].inlineSize : box.inlineSize)
      : entry.contentRect.width;

    const nextColumns = inlineSize >= 720 ? 3 : inlineSize >= 460 ? 2 : 1;
    // 结果没变就不写 style，避免无意义的下一轮布局。
    if (nextColumns === lastInlineSize) continue;
    lastInlineSize = nextColumns;
    panel.style.setProperty('--panel-columns', String(nextColumns));
  }
});

// 只观察需要根据自身内容盒调整的面板。
observer.observe(panel);

这里保存的是列数而不是每个像素值，能把连续尺寸变化压缩成有限状态。若业务必须写入像素，也要比较规范化后的数值，避免小数舍入让 100 和 100.0001 来回改写。

把测量与写入合并到下一帧

当一个回调会收到多个入口，或多个组件同时改变尺寸时，不要在每个 entry 里立即改布局。先记录最新测量结果，再用一个 requestAnimationFrame 合并写入。关键点是“同一帧只安排一次”，并且回调下一次触发时仍要重新比较。

const card = document.querySelector('.card');
let pendingWidth = null;
let frameId = 0;
let appliedWidth = -1;

const observer = new ResizeObserver((entries) => {
  // 只保留这一轮观察到的最新宽度，避免重复排队。
  const entry = entries[entries.length - 1];
  pendingWidth = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;

  if (frameId !== 0) return;
  frameId = requestAnimationFrame(() => {
    frameId = 0;
    const width = pendingWidth;
    pendingWidth = null;
    if (width == null || Math.round(width) === appliedWidth) return;

    appliedWidth = Math.round(width);
    // 写入不改变 card 的外部尺寸，只更新内部呈现状态。
    card.dataset.density = appliedWidth 

观察范围和生命周期也要收紧

如果回调只为了让一个面板内部变密或变疏，就观察这个面板，不要把祖先容器、同级列表和内部每张卡片全部交给同一个观察器。观察对象越多，布局写入形成交叉反馈的机会越大。元素被替换或组件销毁时，要调用 unobserve(target) 或 disconnect()，并取消尚未执行的帧任务。

判断修复有效，可以看三个信号：尺寸稳定后回调不再持续增长；相同的布局状态不会重复写入；窗口调整或内容变化后只出现必要的几次通知。不要只看警告是否消失，因为把日志吞掉并不能说明循环已经断开。

常见疑问

为什么加 setTimeout 就暂时好了？ 延后写入可能改变了触发时机，但没有消除“读到尺寸后改回尺寸”的关系。应优先加入相等判断，并确认写入目标不会改变被观察盒子的外部尺寸。

能不能在回调里直接修改 width？ 可以，但必须有明确的收敛条件，例如只从有限状态计算目标值，且目标值与当前值相同就停止写入。否则回调很容易把观察器变成布局振荡器。

contentBoxSize 和 contentRect 选哪个？ 新代码可优先读取内容盒尺寸，并保留兼容回退；两者表达的是不同盒模型边界，不能混用后再把结果直接写回同一个外部尺寸。

总结来说，ResizeObserver 循环通知的修复顺序是：找到回调里的布局写入，读取后先做状态去重，再把必要写入合并到下一帧，最后收紧观察范围并在销毁时清理。只要反馈边有稳定的出口，自适应布局和观察器可以同时保留。