委托和约束:是否有性能最佳点?

时间:2011-09-04 21:08:09

标签: jquery performance

我正在优化一大堆jQuery代码。我需要帮助。

具体来说,我有很多元素,我想要拖拽。我已经决定使用事件委派来最小化加载时间,正如简要讨论here。问题是运行时性能略有损坏,因为浏览器必须在运行时初始化拖动。

是否可以在页面加载期间使用委托,然后,如果浏览器处于非活动状态,通过绑定一点一点地使元素可以拖动? (某种聪明的异步绑定。)这样,我将获得高负载高运行时性能。

还是有更好的方法吗?

1 个答案:

答案 0 :(得分:5)

你应该坚持代表团。在事件冒泡后处理事件时,应该只有最小/几乎不存在的性能损失。但是,如果你最终将处理程序绑定到很多元素上,那么你必须要付出代价才能表明你正在做的事情,无论你做得多慢。是否存在特定的其他集中,您没有将代理处理视为完整的解决方案?我一直坐在这里思考一下,但我不记得任何特定的边缘案例问题,除了ie7下面的事件冒泡失败,在这种情况下你无论如何都被搞砸了。你应该只是向父级或窗口添加一个处理程序,我无法看到这会在任何时候导致问题。

$(selector).live("event names", handler);

相同
$(window).delegate(selector, "event names", handler)

两者都只将单个事件处理程序绑定到单个DOM元素。

我已经重读了几次这个问题而且我不确定你是否对事件授权的工作方式不确定,或者我是否错过了阅读中的某些内容,如果我错过了它就道歉。

使用委托处理程序时,您要在公共父元素上创建一个事件侦听器。 DOM事件通过父链冒泡到window,这允许你有一个函数监听很多元素上的事件(如果你在window上绑定一个处理程序,那么你会在每一个事件触发时被激活那种没有明确停止冒泡的类型)。事件将标识它最初定位的元素,因此委托处理程序仅检查所有事件目标与已分配的事件目标,然后在找到适用的事件时对其进行路由。这就像targetElement["on"+event.name].call(targetElement, event)一样简单(像jQuery这样的库为你做了一些额外的事情,但这就是要点)。监控这样的事件几乎没有任何成本,因此不会引起任何问题。

好处是多方面的,但两个大的好处是:

  1. 在一个DOM插入点上只有一个事件处理程序消耗了记忆和cpu周期。通过事件泡沫和许多其他问题的方式,让事件处理程序的副本观看不同的元素总是表现更差,更糟糕。

  2. 您可以将事件绑定到尚不存在的元素。由于您可以通过选择器等特性识别它们,因此您可以根据这些内容设置处理程序(这通常就是它如何完成)。如果要在不使用委托处理的情况下将事件绑定到特定元素,则必须具有元素创建监视和事件绑定处理程序,以将处理程序绑定到新创建的元素,这也是一个巨大的开销。

  3. 有一些例外,其中存在由授权引起的问题。在IE8及以下版本中出现的一个导致鼠标进入和离开以使其无法正确触发的问题。这些案例表明,在规范化DOM怪癖时,需要特别使用jQuery之类的东西。在这一点上,如果你不想支持