Javascript 委托(delegate)性能注意事项

Question

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

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

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

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

那么，除了编程变得更容易、简单、干净之外，使用委派的性能提升在哪里？

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

Answer 1

But, if bubbling is not stopped, events spawn and propagate through all the DOM tree, so there is the same resource consumption in the page using delegation or not. And, if the delegated handler has to perform check on the source of the event, it would be also more consuming...

在没有任何事件监听器关联的情况下通过 DOM 树传播的事件不一定请求浏览器内存使用。 不要求采取行动的可能根本不会受到监控。 现代浏览器针对更好的 UI 性能进行了高度优化，这种类型的内存浪费将是任何基本客户端首先要避免的问题。

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

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

每个元素肯定会有更多的事件监听器，例如一个用于展开/折叠，一个用于拦截右键单击以显示上下文菜单，一个用于左键单击以启用拖放，一个用于双击以执行一些操作等等...
每个元素有 5 个事件监听器，在一个包含 100 个文件的简单文件树中，您将招致 500 个事件监听器由浏览器管理，这就是发生大量内存使用的地方。

So, where is the performance gain in using delegation, beyond programming being more easy, simple, clean?

在上面的示例中，当您在父元素(例如树容器)上捕获 5 个事件而不是 500 个时，您请求的操作减少了 99%，因此浏览器中的内存分配也减少了。
然后，每次触发所监视的事件之一时，选择性激活与正确目标相关的正确操作意味着只需运行一个函数来查找和应用正确的处理程序。

在网络上你可以找到关于浏览器低级内存管理和增益事件委托(delegate)带来的其他解释，但如果你认为不依赖这些来源，最好的方法是自己做一个测试，例如一个要求很高的小部件，它监听许多事件并使用动画，在 DOM 中多次复制它并查​​看 UI 的动态行为。