HTML5尺寸监听方法及ResizeObserver应用

本文深入解析了HTML5中ResizeObserver API的核心使用要点与常见陷阱：从必须传入回调函数的严格构造要求，到监听目标必须为已挂载DOM元素的硬性前提；从contentRect仅反映content-box尺寸（不含padding、border、margin及transform影响）的精确语义，到手动调用unobserve或disconnect进行资源清理以避免内存泄漏的关键实践——每一条都直击开发者在响应式布局和动态组件开发中极易踩坑的细节，是高效、安全使用ResizeObserver不可或缺的实战指南。

ResizeObserver 构造函数必须传回调函数

不传 callback 会直接报错：TypeError: Failed to construct 'ResizeObserver': 1 argument required, but only 0 present。它不像 IntersectionObserver 那样支持无参构造后手动绑定。

正确写法是立即传入一个函数，该函数接收两个参数：entries（ResizeObserverEntry 数组）和可选的 observer 实例本身：

const ro = new ResizeObserver((entries) => {
  for (const entry of entries) {
    console.log('宽：', entry.contentRect.width);
    console.log('高：', entry.contentRect.height);
  }
});

监听目标必须是已挂载的 DOM 元素

ResizeObserver 不会自动等待元素出现，如果传入 null、undefined 或尚未插入文档的节点（比如刚 document.createElement('div') 但没 appendChild），会静默失败——既不报错，也不触发回调。

• 确保调用 ro.observe(target) 前，target 已存在于 document 中
• 动态创建的元素建议在 append 后立刻 observe，不要依赖后续事件“再观察”
• 若目标由框架（如 React/Vue）控制，需在 useEffect / mounted 钩子中执行 observe

contentRect 是只读对象，且不含滚动或边框尺寸

entry.contentRect 返回的是一个只读的 DOMRectReadOnly 对象，包含 width、height、top、left 等字段，但它反映的是 content box 尺寸（即 box-sizing: content-box 下的宽高），不包括 padding、border、margin，也不受 transform 影响。

常见误区：

• 误以为 contentRect.width 等于 element.offsetWidth —— 实际上后者含 border 和 padding
• 想监听滚动导致的可视区域变化？ResizeObserver 不管这个，得用 scroll 事件或 IntersectionObserver
• 需要包含 padding 的尺寸？可手动计算：entry.contentRect.width + parseFloat(getComputedStyle(target).paddingLeft) + parseFloat(getComputedStyle(target).paddingRight)

停止监听要用 unobserve，不用时记得 disconnect

每个 ResizeObserver 实例会持续持有对观察目标的弱引用，不显式清理可能引发内存泄漏，尤其在单页应用频繁切换组件时。

• 移除某个目标：ro.unobserve(target)
• 清空全部目标：ro.disconnect() —— 这不会销毁实例，之后还能重新 observe
• 组件卸载/元素销毁前务必调用 disconnect，否则回调仍可能执行（此时 target 可能已为 null 或被移除）

容易被忽略的一点：disconnect 后不能再调用 observe，除非新建实例。别指望它像事件监听器那样“重连”。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5尺寸监听方法及ResizeObserver应用》文章吧，也可关注golang学习网公众号了解相关技术文章。