我是否应该担心附加许多不需要的事件处理程序/监听器？

Question

我在每个页面上都有一个包含许多jQuery事件处理程序的站点，所有这些都在一个大的.js文件中。

这意味着对于任何页面，大多数事件处理程序都是针对不存在且根本不会使用的HTML。

这会让我的表现完全消失吗？

编辑：举例来说，大多数事件处理程序都是这样的：

$(".page").on("click", ".notes .add", function(){ ... });

因为.on()适用于新元素，它是否会浪费处理能力，或者只有在ajax调用后DOM发生变化时才会生效？所以为了进一步澄清我的问题，我想我应该将其分解为两部分。

1. 如果有演出，那么什么时候会发生？ （总是，在任何情况下，仅在DOM上更改，仅在加载时）。
2. 丁是否足以担心？我该如何测量？如果有一千个这样的听众，那么会在几秒，几毫秒，几微秒内测量叮？我知道我可以加载页面并看看它的“感觉”但是我想知道如果我在开始之前构建了整个错误的东西！

Answer 1

它在很大程度上取决于标记，但一般来说，如果不使用它们，最好删除不必要的事件处理程序。

使用Sizzle选择引擎将jQuery事件附加到元素。这意味着对$('a').click()的调用仍然需要遍历搜索链接的整个DOM。由于您的元素不存在，因此不会绑定任何事件，但这并不妨碍jQuery必须搜索目标元素。减少jQuery工作量的一种方法是在绑定必要事件之前测试是否存在已知元素，例如表单标记。

if ($('form').size() > 0) { 
   // bind events for form here
}

如果事件与.on()，.delegate()或.live()持续存在，情况会更糟，因为它们会占用更多资源，因为它们旨在绑定到所有元素，包括尚未创建。

Answer 2

我认为不应该只包含您实际需要的JavaScript。您不需要的任何代码只是浪费处理能力但它是否对性能产生影响实际上取决于您的标记/其他代码/等。

我担心可维护性，而不是担心性能问题。您真的只想拥有一个包含网站所有页面所有代码的大型JavaScript文件吗？它最终会变得混乱。

---

关于：$(".page").on("click", ".notes .add", function(){ ... });。这真的取决于。事件委托的好处是它只绑定一个事件处理程序来管理多个元素。

这里，它仅将事件处理程序绑定到.page。但是处理程序正在检查来自.page后代的任何点击事件，以查看该元素是否与.notes .add匹配。很明显，如果没有.notes .add元素，这只是不必要的计算。

但是如果相反.page元素甚至不存在，那么事件处理程序甚至不会被绑定，这是可以的。 jQuery将尝试查找.page元素并将失败。根据选择器的复杂程度，这确实会产生影响（虽然类名称并不复杂）。