将大量事件处理程序附加到$(文档)是不是很糟糕?

时间:2016-03-26 20:57:13

标签: javascript jquery

我有一个非常动态的Web应用程序,不断创建和销毁元素。

为了使点击和其他事件保持不变,我将所有这些事件附加到$(文档),如下例所示:

 $(document).on('click', '.tabs li a', function(event) {

 });

就像我说的,几乎所有这些事件都被附加到$(文档)..这有什么缺点吗?这些事件处理程序存储在哪里?它会让我的应用程序变慢吗?

2 个答案:

答案 0 :(得分:1)

不 - 这会对jQuery的性能产生负面影响。您不应将所有委派的事件处理程序绑定到文档对象。这可能是您可以创建的最糟糕的性能方案。正如jQuery文档中的事件性能部分here所述 -

  

将许多委派的事件处理程序附加到document会降级   性能。每次事件发生时,jQuery都必须比较所有事件   该类型的所有附加事件的选择器到的每个元素   从事件目标到文档顶部的路径。为了最好   性能,将文档位置的委托事件附加到附近   尽可能使用目标元素。

避免对大型文档上的委派事件过度使用documentdocument.body。对于委托事件处理,将它们绑定到非动态的最近父节点会更有效率。

可以在this answer中找到有关问题的惊人详细说明。

希望这有帮助!

答案 1 :(得分:0)

tl; dr Binding侦听器分配内存。如果你对许多不断绑定到文档的侦听器执行此操作,则在卸载文档之前,这些侦听器都不会被关闭(即页面刷新,如旧学校html中那样硬加载另一个文档)。最终在SPA中,您将遇到内存泄漏和浏览器崩溃