用途:处理 ResizeObserver 回调引发的布局循环问题,例如界面闪烁、尺寸无限增长、抛出“ResizeObserver loop completed with undelivered notifications”、测量到错误的盒,或观察器未清理。通知在渲染阶段、绘制前执行,回调若修改自身观察的尺寸会形成循环依赖;浏览器延迟通知并报错,但不会修复循环或多帧布局。
主要能力:提供检查清单,要求先确认被观察元素、请求的盒(content-box、border-box 或设备像素内容)、每条 entry 读取的值,以及回调触发的全部样式/状态写入;绘制“观察尺寸→回调→DOM/样式/状态写入→布局→观察尺寸”的依赖图,只有写入能改变被测量尺寸或其祖先/后代依赖时才构成环。
用法要点:JS 不需要测量时优先用 CSS/容器查询布局;由 JS 负责响应时忽略未变化的预期尺寸,保持写入单调或收敛;需在绘制后更新用 requestAnimationFrame 调度写入,不能当作通用错误抑制。按契约选盒,不混用 CSS 像素与设备像素。目标脱离归属时调用 unobserve(),观察器销毁时 disconnect(),并让 setup/cleanup 在框架重挂载与目标替换下幂等。
适用场景:初挂载、内容增减、容器缩放、隐藏/显示切换、目标替换与卸载的测试,记录最终几何与 window 错误事件;快速探针包括多帧日志观察是否收敛、临时移除写入定位依赖、重挂载前后统计观察器/目标数。
限制与边界:iframe 跨文档高度消息归 iframe-embed-contracts,虚拟行测量与滚动窗口归 large-list-data-grid-contracts,页面级 CLS 归 core-web-vitals-performance-contracts,图片固有尺寸归 responsive-image-contracts。判定需能复现回调导致的尺寸环、错误盒、过期目标或清理泄漏;仅有 ResizeObserver 存在、单次良性通知、一次性无复现错误、已防护的库或属于相邻技能的 iframe/虚拟化问题视为弱发现,不编造修复。输出从结论开始(confirmed、candidate/needs evidence、reject 或 route),报告观察元素与盒、读写依赖、复现与证据、生命周期、最小收敛或清理改动、技能边界及回归测试。来源:MDN ResizeObserver、CSSWG Resize Observer 规范、fullcalendar issue 8090。