Question

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

为了使点击和其他事件保持不变，我将所有这些事件附加到$（文档），如下例所示：

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

 });

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

Answer 1

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

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

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

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

希望这有帮助！

Answer 2

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