Chrome 事件触发在大型 DOM 中需要很长时间

Posted 2023-05-09

【中文标题】Chrome 事件触发在大型 DOM 中需要很长时间

【英文标题】：Chrome event triggering takes ages in large DOM

【发布时间】：2012-09-29 15:07:09

【问题描述】：

我有一个相对较大的 DOM，并且在触发元素上的事件时注意到 chrome 中令人难以置信的性能下降。单个事件例如：

myElem.trigger('myevent.myscope',arguments);

需要 14 毫秒！！ (22.0.1229.92 米)

firefox 15.0.1 和 msie 9 中的相同事件触发时间不到 1 毫秒！

该元素是一个 jquery 对象并已被缓存，因此在触发之前不会进行 DOM 查找。我正在使用 console.time()

console.time('trigger');
myElem.trigger('myevent.myscope',arguments);
console.timeEnd('trigger');

有人能解释一下这种情况吗

谢谢

加里

【问题讨论】：

你能发布你的事件监听器代码吗？

@Derek 事件被触发，但并不总是有事件监听器。事件的触发发生在小部件内，例如loaded.mywidget 有时有事件监听器，有时没有。可以绑定在主体上，也可以直接绑定在具有小部件的元素上。

当没有要测试的代码时，检查性能有点困难......祝你好运！

【参考方案1】：

这不是您问题的直接答案。

但根据我在自定义事件方面的经验，我会避免使用触发器/jquery 事件。

取决于 jQuery 版本。触发器会在 dom 树上冒泡，这可能需要很长时间。

“从 jQuery 1.3 开始，.trigger()ed 事件在 DOM 树中冒泡；一个 事件处理程序可以通过从 处理程序或在事件对象上调用 .stopPropagation() 方法 传入事件。 " - trigger

我个人的解决方案是使用 Peter Higgins Pubsub。

我创建了一个 jsperf 测试，显示 jquery 'on' 的性能差异（蓝色是 pubsub，红色是 jquery，越长越好 [每秒操作数]）； http://jsperf.com/peter-higgins-pubsub-vs-tiny-pubsub

从现在开始，我在处理自定义事件时使用 pubsub，在处理单击、鼠标悬停等事件时使用 jquery。

只要我的 2cents。

【讨论】：

虽然从技术上讲不是答案，但我将其标记为答案，因为它是问题的“解决方案”。与触发可能有也可能没有监听器的事件不同，pubsub 方法可能会更精简并避免 DOM 上的大量“噪音”。