Javascript 委托性能注意事项

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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

那么，除了让编程更简单、更简单、更干净之外，使用委托的性能提升在哪里？

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

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