防抖 ResizeObserver 的布局计算

目标

图表在每次 resize 事件都重算，拖动窗口时页面卡死。本配方用一个布尔标志把重算调度到下一个动画帧，使每帧最多执行一次，再用 performance 标记验证标记数等于帧数而非原始事件数；提醒不要在回调里同步修改被观察元素的尺寸，否则会触发观察循环。

步骤要点

1. 把重算调度到下一个动画帧。
2. 用标志保证每帧最多一次。
3. 用 performance 标记验证次数等于帧数。
4. 避免在回调中同步修改被观察元素尺寸。

let scheduled = false;
const observer = new ResizeObserver(() => {
  if (scheduled) return;
  scheduled = true;
  requestAnimationFrame(() => {
    scheduled = false;
    recomputeLayout();
  });
});
observer.observe(container);

排错提示

• 同步改尺寸会触发观察循环告警。
• 缺少尾随防抖会丢失最终尺寸。
• 不降低单次计算成本。

适用边界

• 滚动期间仍会执行。
• 不减少单次计算开销。