HTML5ResizeObserver教程及元素监听方法

目前golang学习网上已经有很多关于文章的文章了，自己在初次阅读这些文章中，也见识到了很多学习思路；那么本文《HTML5 ResizeObserver使用教程及监听元素变化方法》，也希望能帮助到大家，如果阅读完后真的对你学习文章有帮助，欢迎动动手指，评论留言并分享~

ResizeObserver 是 HTML5 原生异步监听 DOM 元素尺寸变化的 API，需传入接收 entries 和 observer 的回调函数，仅支持具体元素、不支持 window/document，contentRect 提供像素级内容盒尺寸且不触发重排。

ResizeObserver 是 HTML5 唯一原生支持元素尺寸变化监听的 API

HTML4 没有等效机制，也不存在“HTML4 监听元素大小变化”的说法——那是误传。浏览器直到 Chrome 64 / Firefox 69 / Safari 13.1 才陆续支持 ResizeObserver，它不是“升级版 onresize”，而是专为 DOM 元素设计的异步尺寸观测器。

怎么创建并使用 ResizeObserver 实例

必须传入一个回调函数，该函数接收两个参数：entries（ResizeObserverEntry 数组）和 observer（当前实例）。不能直接监听 window 或 document，只能监听具体 DOM 元素。

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log('contentRect:', entry.contentRect);
    console.log('target:', entry.target);
  }
});

ro.observe(document.querySelector('#my-box'));

• entry.contentRect 是最常用字段，包含 width/height/top/left 等，单位为像素，反映内容盒（content box）尺寸
• 不触发重排（reflow），也不阻塞主线程，是异步批量回调
• 同一个 ResizeObserver 实例可多次调用 observe() 监听多个元素
• 记得在不需要时调用 unobserve(element) 或 disconnect()，否则可能造成内存泄漏

为什么不用 window.onresize 替代 ResizeObserver

window.onresize 只响应整个视口（viewport）大小变化，对元素内部样式变更、Flex/Grid 重排、display: none ↔ block 切换、甚至 JS 修改 style.width 都完全无感。

• 常见误用：给容器加 onresize 属性——无效，HTML 元素不支持该事件
• window.onresize 触发频率高且不可控，容易抖动；ResizeObserver 自动去重、合并同一帧内的多次变化
• 无法获取目标元素的实际尺寸，必须手动 getBoundingClientRect()，而后者会强制同步布局（layout thrashing）
• 服务端渲染（SSR）或 Web Components 中，ResizeObserver 更可靠，因为它依赖真实 DOM 节点而非全局窗口

兼容性处理与降级建议

IE 完全不支持，旧版 Edge（≤18）也不支持。若需兼容，不要用 polyfill（现有 polyfill 均基于轮询或 MutationObserver + 定时器，精度差、性能糟），而应按场景降级：

• 仅需响应视口变化 → 用 window.addEventListener('resize', ...) + debounce
• 需监听某容器子元素数量/高度变化（如聊天列表）→ 改用 MutationObserver 关注子节点增删，再手动测高
• 动态图表容器 → 在图表库（如 ECharts、Chart.js）的 resize() 方法调用时机做 hook，而不是监听 DOM
• 真需要精确 content box 变化且必须支持 IE → 放弃自动监听，改由业务逻辑在关键路径（如折叠面板展开后）显式触发尺寸检查

真正难处理的不是“监听不到”，而是监听后立刻读取尺寸又触发 layout —— ResizeObserver 的 contentRect 是浏览器计算好的快照，这点很多人一开始没意识到。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~