如何对ResizeObserver的回调逻辑进行节流优化？

• 你的两个判断均正确：可以通过throttle实现该逻辑的性能优化，仅需要对回调内的业务逻辑做节流即可，observe相关的原生监听部分确实无法也不需要做节流处理。

实现方案 #

ResizeObserver本身的触发频率由浏览器渲染流程控制，原生API没有提供节流配置项，且监听触发的性能开销极低，性能瓶颈基本都来自回调内的业务逻辑，因此仅需要把业务逻辑用throttle包裹即可，示例代码如下：

import throttle from 'lodash/throttle'

// 节流间隔可根据业务精度需求调整，示例为200ms
const throttledAdjust = throttle((entries) => {
  const el = document.querySelector('#foo');
  // 原有的获取boundingRect、调整高度等业务逻辑
}, 200, {
  // 配置项可按需调整：默认leading=true（首次触发立即执行）、trailing=true（停止变化后执行最后一次）
  // 尺寸调整场景建议保留默认配置，避免最终停顿时的尺寸计算偏差
})

const myResize = new ResizeObserver(throttledAdjust);
const imageToWatch = document.querySelector('.image');
myResize.observe(imageToWatch);

// 不需要监听时的销毁逻辑，必须执行避免内存泄漏
// throttledAdjust.cancel() // 取消节流队列中待执行的回调
// myResize.unobserve(imageToWatch)
// myResize.disconnect()

原理说明 #

• ResizeObserver的observe方法是浏览器原生实现，负责在元素尺寸变化时触发回调，这部分逻辑无法被外部节流，也没有节流的必要：原生回调触发本身不会带来明显性能损耗，只需要控制高频触发下业务逻辑的执行次数即可达到优化效果。
• 直接对回调函数整体做节流包裹即可，不需要修改ResizeObserver的监听逻辑，完全可以满足性能优化的需求。

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