ResizeObserver可高效监听DOM元素尺寸变化，通过observe()监听目标元素，contentRect获取内容区域尺寸，borderBoxSize获取含边框尺寸，支持unobserve()和disconnect()清理资源，适用于响应式组件等场景。
当需要实时感知 DOM 元素尺寸变化时，
ResizeObserver
是比事件监听或轮询更高效、更现代的解决方案。它能监听元素内容区域或边框盒的变化，且不会触发重排或
重绘
，性能优秀。
基本用法：创建并观察目标元素
使用
构造函数创建实例，调用
方法指定要监听的元素。
const observer = new ResizeObserver(entries => {entries.forEach(entry => {const { width, height } = entry.contentRect;console.log('宽度:', width, '高度:', height);});});// 监听某个元素const targetElement = document.getElementById('myDiv');observer.observe(targetElement);
获取不同尺寸信息：contentRect vs borderBoxSize
提供的是 CSS 内容区域的尺寸（不包括边框和外边距），适合大多数场景。如果需要包含边框的尺寸，可以使用
。
const observer = new ResizeObserver(entries => {entries.forEach(entry => {// 使用 borderBoxSize 获取包含边框的尺寸const boxSize = entry.borderBoxSize[0];console.log('包含边框的宽度:', boxSize.inlineSize);console.log('包含边框的高度:', boxSize.blockSize);});});
停止监听与清理资源
为了避免内存泄漏，不再需要监听时应调用
或
方法。
Comet AI 浏览器
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
下载
立即学习
“
Java免费学习笔记（深入）
”；
// 停止单个元素的监听observer.unobserve(targetElement);// 完全断开所有监听observer.disconnect();
基本上就这些。ResizeObserver 特别适合用于响应式组件、图表容器、动态布局调整等场景，无需依赖窗口 resize 事件或定时检查尺寸。兼容性良好，主流
浏览器
均已支持。
ResizeObserverobserve()entry.contentRectborderBoxSizeunobserve()disconnect()