ResizeObserver避免尺寸回调触发布局循环的实现方法

ResizeObserver 的回调里如果直接修改被观察元素的宽高，最容易出现的不是“少监听一次”问题，而是读到尺寸后又写回布局，下一轮通知再次进入同一个回调。更稳妥的实现是：回调只收集变化，用 WeakMap 记住期望尺寸，用 requestAnimationFrame 合并写入，并在写入前再次比较目标值。这样既保留响应式布局，也给循环留下明确的收敛条件。

只要回调写入可能影响自身尺寸，就不要同步写样式；先做目标值判断，再把一次写入推迟到下一帧，并给变化设置边界。

ResizeObserver布局循环的根因是回调同时读写布局

浏览器会在绘制前交付尺寸通知。回调若把 contentBoxSize 读出的值加上一个新宽度，再写回 style.width，布局重新计算后就可能产生下一次通知。浏览器会通过延后未交付通知来避免页面锁死，但这只是保护，不代表业务逻辑已经停止抖动。

因此排查时先看回调是否修改了观察目标、父级尺寸、影响自动换行的字体或间距。一次提示后稳定，和每帧重复提示，是两个不同问题；后者必须改写更新闭环。

先用期望尺寸判断过滤重复写入

期望值是最小的稳定条件。下面的示例把每个元素的目标宽度放进 WeakMap，目标已经达到时直接跳过；这比全局布尔值更适合一个观察者管理多个卡片。

const expectedWidth = new WeakMap();
const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const width = Math.round(entry.contentRect.width);
    const target = Math.max(240, Math.min(width, 720));
    // 目标值没有变化时不写样式，切断重复通知。
    if (expectedWidth.get(entry.target) === target) continue;
    expectedWidth.set(entry.target, target);
    // 只写业务需要的结果，避免把观测值原样写回造成抖动。
    entry.target.style.setProperty("--panel-width", `${target}px`);
  }
});

这里的 240 和 720 只是组件约束示例，实际项目应来自布局设计。关键点不是“每次都改成一个整数”，而是目标值必须能在下一次观测中保持不变。

用requestAnimationFrame让更新按帧合并

如果回调还要修改会影响布局的属性，可以把待处理项暂存下来，同一帧只安排一个更新。调度函数中重新读取当前尺寸，避免使用已经过期的 entry；同时用阈值过滤亚像素变化。

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

const schedule = (element) => {
  pending.add(element);
  if (frameId) return;
  // 把布局写入移到下一次绘制节奏，并合并同帧变化。
  frameId = requestAnimationFrame(() => {
    frameId = 0;
    for (const item of pending) {
      const next = Math.round(item.getBoundingClientRect().width);
      // 小于 1px 的变化不触发业务写入，减少亚像素抖动。
      if (Math.abs(next - (expectedWidth.get(item) ?? -1))  {
  // 回调只收集元素，不在通知交付阶段同步改布局。
  for (const entry of entries) schedule(entry.target);
});

这个模式解决的是“同一帧内重复安排”的问题，不会自动解决业务逻辑本身的无界增长。若每次写入都让目标继续变大，仍要增加明确的最大值、次数上限或停止条件。

用边界检查和清理保证组件最终收敛

组件销毁时要先取消待执行的帧，再清空集合，最后解除观察。对于隐藏元素，先判断 contentRect 是否为零也很有帮助；不要把“元素暂时不可见”误判为新的业务尺寸。

相关问题

只把回调包进requestAnimationFrame就够了吗？

不够。它只改变写入时机，仍需目标值判断，否则每一帧都可能继续安排新的布局变化。

ResizeObserver的错误提示一定代表页面坏了吗？

不一定。偶发提示可能是浏览器延后通知的保护机制；如果每帧重复出现并伴随尺寸变化，就应检查回调写入链路。

为什么不用window.resize替代？

window.resize 关注视口，不覆盖单个容器的尺寸变化；组件布局需要容器级观察时，ResizeObserver 更贴合问题边界。