首选 resizeobserver，它异步监听元素内容区宽高变化，自动批处理、防抖且无性能负担；兼容方案用 mutationobserver 监听 style 变更；window.resize 仅适用于窗口级响应，需手动节流。
JavaScript 中监听元素大小改变，核心是避开全局 window.resize 的低效方案，转而使用更精准、性能更优的原生机制。现代标准推荐直接用 ResizeObserver，它专为这个场景设计，不触发重排、响应及时、自动批处理。
ResizeObserver 是首选方案
它异步监听 DOM 元素 content box（内容区）的宽高变化，回调在布局完成、绘制之前统一执行，天然防抖且无性能负担：
- 只在尺寸真正变化后通知，跳过 CSS 动画中间帧、字体加载等伪变化
- 支持批量处理：多个被观察元素同时变，回调只运行一次，传入完整 entries 数组
- 自动忽略不可见元素（
display: none、未挂载、visibility: hidden等） - 创建后调用
.observe(el)即可开始监听；不再需要时用.unobserve(el)或.disconnect()清理
MutationObserver 可作为兼容补充
当目标环境不支持 ResizeObserver（如旧版 IE 或极老 Safari），可通过监听元素 style 属性变更间接捕捉宽高变化：
- 配置
{ attributes: true, attributeFilter: ['style'], attributeOldValue: true } - 在回调中解析
oldValue和新style.width/style.height做比对 - 注意：它无法感知 class 切换、CSS 计算值变化或 layout 触发的隐式尺寸更新，可靠性低于 ResizeObserver
传统 window.resize 仅适用于窗口级响应
window.addEventListener('resize', ...) 本质是监听整个视口变化，不是元素级监听：
- 每次窗口缩放可能触发数十次，必须手动节流（如
requestAnimationFrame或setTimeout防抖） - 无法区分哪个具体元素变了，需额外调用
getBoundingClientRect()轮询判断，开销大 - 适合做整体布局切换（如 PC/移动端断点），不适合精细控制单个容器行为
实际使用要点
避免常见陷阱，让监听稳定可靠：
- 不要在 ResizeObserver 回调里直接修改被观察元素的尺寸——可能引发循环触发（浏览器通常会限制，但逻辑应主动规避）
- 监听前确保元素已挂载 DOM，否则
observe()无效；React/Vue 中建议在useEffect或mounted钩子内初始化 - 需要监听 border-box 尺寸？可传
{ box: 'border-box' }选项（部分旧 Safari 版本不支持） - 兼容性兜底：Chrome 64+、Firefox 69+、Safari 13.1+、Edge 79+ 均原生支持；老环境可用 juggle/resize-observer polyfill
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
