检测Div尺寸并触发函数：ResizeObserver的高性能替代方案

ResizeObserver的性能表现 #

• 这是浏览器原生专为监听元素尺寸变化设计的API，只有当目标元素尺寸真的改变时才会触发回调，属于被动触发，不会做无用的轮询操作。
• 回调执行时机是在浏览器布局完成后、绘制之前，不会引发额外的重排重绘，资源占用极低，完全不用担心性能问题。
• 完美匹配你的场景：父div高度变化时才调用func，精准且高效。

requestAnimationFrame的性能表现 #

• 它是按浏览器刷新频率（一般60Hz，每16ms一次）持续执行回调，属于主动轮询模式。
• 不管父div高度有没有变化，每帧都会跑一遍检查逻辑，哪怕没有变化也会消耗CPU资源。如果你的高度检查逻辑复杂，长期运行下来会增加不必要的性能开销。
• 它的优势是和动画帧同步更新，但你的需求是监听尺寸变化，用它属于大材小用，性价比很低。

• MutationObserver：只能监听父div的style属性显式变更（比如直接修改height值），但无法捕获父div因容器变化、内部内容撑开等导致的隐式高度变化，局限性很大，不适合你的场景。
• window.resize事件：仅适用于父div高度随窗口大小变化的情况，如果父div是被其他元素（比如折叠面板、动态加载内容）影响高度，这个方法完全失效。而且resize事件触发频率极高，必须加防抖处理，性能远不如ResizeObserver。

直接用ResizeObserver，代码示例如下：

const parentDiv = document.querySelector('.parent');
let lastHeight = parentDiv.offsetHeight;
const rowHeight = x; // 替换成你实际的每行高度

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const currentHeight = entry.target.offsetHeight;
    // 避免因亚像素精度问题触发不必要的更新
    if (Math.abs(currentHeight - lastHeight) > 1) {
      lastHeight = currentHeight;
      const rowCount = Math.floor(currentHeight / rowHeight);
      func(rowCount); // 调用你的更新函数
    }
  });
});

observer.observe(parentDiv);

// 记得在不需要监听时停止观察，避免内存泄漏
// observer.unobserve(parentDiv);

• 额外优化：加入高度差值判断，过滤掉浏览器亚像素级别的微小变化，减少不必要的func调用。
• 性能说明：ResizeObserver是浏览器深度优化的API，比手动用requestAnimationFrame轮询高效得多，不会造成性能负担。

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