Javascript委派性能考虑因素

时间:2013-06-07 18:13:49

标签: javascript performance delegation

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

每个元素都会在DOM树中生成事件,并且它们会通过冒泡机制遍历它。

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

但是,如果没有停止冒泡,事件会产生并传播到所有DOM树中,因此使用委托或不使用委托在页面中存在相同的资源消耗。而且,如果委托的处理程序必须检查事件的来源,那么它也会更耗费......

那么,使用委托的性能提升在哪里,除了编程更容易,更简单,更干净?

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

1 个答案:

答案 0 :(得分:6)

  

但是,如果没有停止冒泡,事件会产生并传播到所有DOM树中,因此使用委托或不使用委托在页面中存在相同的资源消耗。而且,如果委托的处理程序必须检查事件的来源,那么它也会更耗费......

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

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

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

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

  

那么,使用委托的性能提升在哪里,除了编程更容易,更简单,更干净?

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

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