JavaScript 代理性能考虑

Question

我在寻找关于使用委托机制提高性能的线程。我谈论的是简单的javascript，没有jQuery或其他工具/库。

每个元素在DOM树中产生事件，并通过冒泡机制在整个DOM树中传播。

委托避免为每个元素创建事件处理程序，而是在单个处理程序中捕获更多事件。此外，停止冒泡，处理程序可以避免事件进一步传播，如果已经正确处理。因此，它将减少页面的资源消耗。

但是，如果不停止冒泡，事件会在整个DOM树中产生和传播，因此使用委托或不使用委托在页面上都会有相同的资源消耗。而且，如果委派的处理程序必须对事件源进行检查，则也会更加消耗资源...

那么，除了编程更轻松、简单、清晰之外，使用委托的性能优势在哪里呢？

是否有一种方法可以完全避免某些事件生成，或使某些元素根本不生成某些事件，从而节省大量资源？例如，在普通页面上，简单的文本，在鼠标悬停时会生成许多无用的消息；如果该消息不需要处理，是否可以在源头上防止其生成？

- Nillus

---

在 JavaScript 中，性能很少是一个实际问题。浏览器大部分时间都处于空闲状态，等待用户阅读。大多数输入之间的时间以 10 毫秒或 100 毫秒为单位（最好的情况下是打字），性能上的微小差异（约为 2-3 毫秒）并不会非常明显。 - zzzzBov

Answer 1

但是，如果冒泡没有停止，事件将通过整个DOM树传播和繁殖，因此在使用委派或不使用委派的页面中，资源消耗是相同的。如果委派处理程序必须对事件源执行检查，则其成本也会更高...

在没有任何事件侦听器相关联的情况下通过DOM树传播的事件不一定需要请求浏览器内存使用量。不需要采取行动的内容可能根本不被监控。现代浏览器高度优化了UI性能，这种类型的内存浪费将是任何基本客户端要避免的第一个问题。

问题不在于从UI生成的大量事件通过DOM树传播，而在于浏览器必须为每个具有事件处理程序关联的元素保存的所有事件侦听器。

想象一个基于Web的文件浏览器，其中DOM树包含表示文件的元素：即使异步加载，当用户展开大量节点时，最终可能同时显示数百个元素。

每个元素肯定会有更多的事件监听器，例如用于展开/折叠的监听器，用于拦截右键单击以��示上下文菜单的监听器，用于左键单击以启用拖放的监听器，用于双击以执行某些操作等等...
对于100个文件的简单文件树，每个元素都将有5个事件监听器，您将遇到要由浏览器管理的500个事件监听器，这是一个巨大的内存使用。

那么，在使用委派时性能提升在哪里，除了编程更容易、简单、干净？ 在上面的示例中，当您在父元素（例如树容器）上捕获5个事件而不是500个事件时，您请求99％的行动较少，因此浏览器中的内存分配较少。然后，每次监视的事件之一被触发时，选择性地激活与正确目标相关的适当操作仅意味着运行一个函数以查找并应用正确的处理程序。

在Web上，您可以找到有关浏览器低级内存管理和委派带来的收益的其他解释，但是如果您认为不能依赖这些来源，最好的方法是自己进行测试，例如在监听多个事件并使用动画的要求部件上，在DOM中复制它多次并观察UI的动态行为。

- yodabar