jquery - 委托(delegate)和绑定(bind) : Is there a performance sweet spot?

Question

我正在优化一段相当大的 jQuery 代码。我需要帮助。

具体来说，我有许多元素需要可拖动。我决定使用事件委托(delegate)来最大限度地减少加载时间，如简要讨论的 here 。问题是运行时性能会受到轻微损害，因为浏览器必须在运行时初始化拖动。

是否可以在页面加载期间使用委托(delegate)，然后，如果浏览器处于非事件状态，是否可以通过绑定(bind)逐渐使元素可拖动？ (某种巧妙的异步绑定(bind)。)这样，我将获得高负载和高运行时性能。

或者还有更好的方法吗？

Answer 1

您应该坚持委派。在事件冒泡后处理该事件应该只存在最小/几乎不存在的性能损失。然而，如果您最终按照您指示的方式将处理程序绑定(bind)到许多元素，无论您做得有多慢，绝对都会付出代价。您是否认为委托(delegate)处理是完整的解决方案？我坐在这里想了一会儿，但我不记得随之而来的任何特定的边缘情况问题，除了 ie7 和下面的事件冒泡失败之外，在这种情况下，无论如何你都会被搞砸。您应该只向父级或窗口添加一个处理程序，但我看不出这会在任何时候导致问题。

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

与

相同

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

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

我已经重读了这个问题几次，我不确定您是否对事件委托(delegate)的工作原理不够坚定，或者我是否在阅读中遗漏了一些内容，所以如果我遗漏了，我深表歉意。

当您使用委托(delegate)处理程序时，您所做的就是在公共(public)父元素上创建事件监听器。 DOM 事件通过父链向上冒泡到 window，这允许您使用一个函数监听许多元素上的事件(如果您在 window 上绑定(bind)一个处理程序，那么您会得到对未明确停止冒泡的该类型的每个事件触发进行 ping 操作)。事件将识别它最初针对的元素，因此委托(delegate)处理程序只需根据分配给它的目标检查所有事件目标，然后在找到适用的事件时路由它们。就像 targetElement["on"+event.name].call(targetElement, event) 一样简单(像 jQuery 这样的库会为您做一些额外的事情，但这就是要点)。监视这样的事件几乎不需要任何成本，因此不会导致任何问题。

好处是多方面的，但其中两大好处是:

1. 在一个 DOM 插入点只有一个事件处理程序，消耗内存和 CPU 周期。由于事件冒泡的方式和许多其他问题，让事件处理程序的副本监视不同的元素总是性能更差，而且明显更差。

2. 您可以将事件绑定(bind)到尚不存在的元素。由于您可以通过选择器等特征来识别它们，因此您可以根据这些内容设置处理程序(无论如何通常都是这样做的)。如果您想将事件绑定(bind)到特定元素而不使用委托(delegate)处理，那么您必须有一个元素创建监视和事件绑定(bind)处理程序，以将处理程序绑定(bind)到新创建的元素，这也是一个巨大的开销。

   <

在少数异常(exception)情况下，会出现由委托(delegate)引起的问题。 IE8 及更低版本中出现的一种问题会导致鼠标进入和离开时无法正确触发问题。这些案例证明了在标准化 DOM 怪癖时需要使用 jQuery 之类的东西。但此时如果你不想支持