JavaScript ResizeObserver 如何避免响应式死循环：contentRect、阈值与 disconnect 边界

仪表盘卡片一换行，旁边的统计数字就跟着跳，开发者打开 Performance 面板后常会看到同一个 ResizeObserver 回调反复出现。问题通常不在“监听尺寸”本身，而在回调里修改了被观察元素，下一轮布局又把修改当成新的尺寸变化。比较稳的处理方式是：只从 contentRect 读取尺寸，用明确的宽度阈值决定是否改布局，完成一次性调整后及时 disconnect() 或改为观察更稳定的容器。

ResizeObserver 回调里不要无条件改写被观察元素；先读取 contentRect，再用阈值保护写操作，无法继续观察时用 disconnect() 收口。

生产目标：让组件响应尺寸，但不把布局推回自己

这类问题常见于侧栏折叠、可拖拽面板和数据卡片。组件需要知道自己的可用宽度，却又在回调中改变 class、padding 或文字布局。只要写入动作影响了同一个盒子的尺寸，浏览器就可能安排下一轮通知。

先定一个边界：ResizeObserver 适合回答“这个元素现在多大”，不适合把每次通知都当成“必须重新写一遍样式”的信号。生产代码应该把读取和写入拆开，写入还要有可比较的条件。

先把尺寸读取和观察边界分开

最小对象关系只有三层：ResizeObserver 持有回调，observe(card) 建立观察目标，回调收到的 ResizeObserverEntry 再通过 contentRect 提供内容盒尺寸。

const card = document.querySelector('[data-card]');

const observer = new ResizeObserver((entries) => {
  const entry = entries[0];
  const width = entry.contentRect.width;
  console.log('card content width:', width);
});

observer.observe(card);

这里的 width 是内容盒宽度，不是边框盒总宽度。若组件的判断依赖边框、滚动条或 CSS 盒模型，应该在正文中明确采用哪一种测量口径，不能把几个属性混着用。

回调里如何阻断自触发

真正危险的写法是“回调一来就切换 class”。这个 ResizeObserver callback 如果没有 width threshold 保护，宽度略过 480px 时给卡片加上边距，而这个边距又让内容盒变窄，回调下一次又撤销 class，两个状态来回摆动。

把“上次已经采用的布局状态”存下来，并只在状态确实改变时写入。阈值最好对应设计系统中的断点，不要使用每个小数像素都可能变化的条件。

let compact = null;

const guardedObserver = new ResizeObserver(([entry]) => {
  const width = entry.contentRect.width;
  const nextCompact = width 

这段代码的关键不是 480 这个数字，而是“尺寸读取得到事实，状态比较决定写入”。如果 data-compact 的样式还会改变 card 的宽度，阈值两侧必须留出足够的设计余量；否则在断点附近仍可能抖动。

权限边界：一次性测量与长期观察要分开

初始化布局时可以观察到第一次稳定尺寸，然后完成布局并停止观察；组件长期跟随容器变化时才保留观察者。两种用途混在同一个全局 observer 里，最容易在页面切换后留下无主回调。

function measureOnce(element, onReady) {
  const once = new ResizeObserver(([entry]) => {
    onReady(entry.contentRect);
    once.disconnect();
  });

  once.observe(element);
  return () => once.disconnect();
}

disconnect() 会停止观察这个 observer 关注的全部目标。若一个 observer 同时服务多个组件，卸载单个组件时更适合使用 unobserve(element)；只有确认它不再承担任何目标时才整体断开。

日志审计：从三类现象判断是不是循环

• 回调连续出现，但 contentRect.width 在两个相邻值之间反复：优先查找回调中的 class、style 和文字换行变化。
• 宽度稳定却仍有回调：检查是否重复调用了 observe()，以及组件更新时是否创建了新的 observer。
• 页面离开后回调还在：检查卸载路径是否执行了 unobserve() 或 disconnect()。

排查时先记录目标元素、宽度、当前布局状态和 observer 生命周期，不要只打印“resize happened”。能把一次通知对应到一个状态变化，才知道是浏览器正常通知还是代码自触发。

发布检查：把边界写进组件验收清单

相关问题：ResizeObserver 的几个边界怎么判断

为什么回调里改 class 会再次触发？

因为 class 可能改变元素的内容盒尺寸；尺寸变化被浏览器安排到下一轮通知，形成新的回调。

应该用 unobserve 还是 disconnect？

只移除一个目标用 unobserve(element)，observer 不再服务任何目标时用 disconnect()。

ResizeObserver 能替代 window.resize 吗？

不能简单替代。window.resize 观察视口，ResizeObserver 观察元素；组件布局通常应以后者为准。

为什么已经加了阈值仍然抖动？

通常是断点附近的样式改动跨过了同一个阈值。给两个状态留出滞回区，或让写入动作不再改变被观察盒子的尺寸。

小结

ResizeObserver 的稳定用法可以归纳为三句话：用 observe() 建立明确目标，用 contentRect 读取统一口径的尺寸，用阈值和状态比较保护 DOM 写入。一次性任务在回调末尾 disconnect()，长期任务则在组件卸载时清理目标。这样既保留了容器级响应式能力，也不会把布局变化变成自己的触发源。