如何利用ResizeObserver实现多元素差异化监听及性能取舍

根据公开的技术实测结论，ResizeObserver更推荐采用单实例管理多元素监听行为的模式——这一观点来自Chromium团队相关技术讨论，对应公开的「ResizeObserver单实例与多实例性能对比」测试结果：

测试场景：在2秒的元素宽高连续动画过程中，监听126个div的尺寸变化：

1. 所有元素由同一个ResizeObserver实例完成监听
   累计监听耗时：69ms
2. 每个元素分别绑定独立的ResizeObserver实例完成监听
   累计监听耗时：585ms

但在实际使用中会发现，单个ResizeObserver实例仅能绑定一套统一的回调逻辑，这套逻辑会对该实例覆盖的所有被监听元素统一执行。如何为存在不同监听需求的多个元素配置差异化的尺寸监听行为？ 目前可见两类可选实现方案：

• 维持单监听实例模式，在回调执行时实时判断当前触发事件的元素应匹配的目标行为——但这种方式实现复杂度高，且生产环境下直接比对元素引用的可靠性存在不确定性；
• 按照不同的行为逻辑拆分多个ResizeObserver实例，这种方式实现更简洁，但理论上会产生额外的性能开销。

除此之外仍有尚未落地验证的实际疑问：在中小规模的页面应用场景下，多实例ResizeObserver带来的性能损耗是否达到需要刻意规避的程度？

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