如何使用ResizeObserver实现窗口尺寸变化事件的监听

这个重构方案完全可行。
ResizeObserver本身设计用于监听DOM元素的尺寸变化，窗口大小变化时，页面根元素document.documentElement的尺寸会同步变化，只要监听该元素的尺寸变动就能等价实现窗口resize事件的监听效果。
和你现在用的window.resize事件相比，ResizeObserver默认在渲染周期的回调阶段触发，不会像原生resize事件那样高频触发，大部分场景下不需要额外做防抖处理，性能表现更优。

// 实例化ResizeObserver
const resizeObserver = new ResizeObserver(() => {
  // 此处替换为你原来的resize事件回调逻辑
  console.log('resize')
})
// 监听页面根元素尺寸变动，等价于监听窗口大小变化
resizeObserver.observe(document.documentElement)

• 页面卸载或者不需要监听时，要主动调用resizeObserver.disconnect()取消监听，避免内存泄漏
• 现代主流浏览器全版本支持ResizeObserver，只有需要兼容IE11等极老旧浏览器时才需要额外引入polyfill
• 如果你的业务场景只需要监听窗口大小变化，两种实现都可以满足需求，如果你后续有监听多个自定义元素尺寸变化的需求，ResizeObserver的适配性会更强

内容的提问来源于stack exchange，提问作者Luke