如何解决如何将 ResizeObserver 用于多种行为
当您有一个实例管理多个元素的行为时,似乎最好使用 ResizeObserver
(如 one of the sources 中的 "ResizeObserver one vs multiple performance" 所指出的):
在宽度/高度的 2 秒动画中观察 126 个 div 的大小。
-
所有元素都由一个 ResizeObserver 观察。
总观察时间:69ms
-
每个元素都由单独的 ResizeObserver 观察。
总观察时间:585ms
但是,据我所知,您只能为 ResizeObserver
的实例真正指定一个行为,然后它会针对它观察到的任何元素运行。 我应该如何观察具有不同行为的多个元素?据我所知,我可以:
- 使用
ResizeObserver
的单个实例并在运行时确定给定元素应该使用什么行为(这看起来不必要地复杂,我不知道在生产中比较元素引用的可靠性如何),或 - 使用多个
ResizeObserver
实例,这会使行为更简单,但理论上会降低性能。
或者,使用多个 ResizeObserver
实例的性能损失是否是我在中小型规模时应该担心的问题?
解决方法
...在运行时弄清楚应该对给定元素使用什么行为(这看起来不必要地复杂,而且我不知道在生产中比较元素引用的可靠性如何)...
我认为这不需要特别复杂。
您可以拥有一组行为,每个行为都有一个 predicate
函数和一个 handler
函数。谓词确定它是否适用于给定元素,并且处理程序执行该行为。 (如果您有数千种行为,这可能不是超级性能,但我假设您没有。)
有类似的东西吗?
const behaviors = [
{
predicate: element => element.classList.contains('first'),handler: element => {
// do stuff
}
},{
predicate: element => element.classList.contains('second'),handler: element => {
// do other stuff
}
},];
const observer = new ResizeObserver((entries) => {
for (let entry of entries) {
// for single behavior
behaviors.find(b => b.predicate(entry))?.handler(entry);
// or every applicable behavior
behaviors
.filter(b => b.predicate(entry))
.forEach(b => b.handler(entry);
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。