jquery 性能 - .on 与 onclick()答案

【问题标题】：jquery performance - .on versus onclick()jquery 性能 - .on 与 onclick()
【发布时间】：2013-11-14 08:58:03
【问题描述】：

我无法找到答案的两个基本问题如下：

1) 绑定点击函数与通过 onclick="doingness()" 触发的性能，如：

$("#id").find('a').on('click',function(){
    $(this).doingness();
});

对比：

<div id="id"><a onlick="doingness()"></a></div>

function doingness(){
    $('#id').do();
}

在我看来，第二个可能表现最好，因为绑定不需要在用户实际点击之前发生，因此脚本不必搜索整个 DOM 以找到一个 id 并将某些内容绑定到它.. 对吗？

接下来，我听说使用这些（不管它叫什么）非常昂贵：

$('body').on('click', '#id', function(){
    $(this).do();
});

当然，我使用了其中一些动态加载的内容，以便函数保持活跃。我猜性能受到的影响主要与整个函数需要保存在内存中，并且可能正在重新访问一遍又一遍地检查它是否应该再次启动。而不是这种代码，我最近意识到我也可以在 html 代替，我的问题是这对性能有帮助吗？

【问题讨论】：

您是否尝试过使用jsPerf 或类似方法进行基准测试？
如果我做了所有这些，我还会在这里问这个问题吗？
对不起，但在这种情况下担心性能是荒谬的。您正在谈论用户单击链接时发生的事情。如果点击和操作之间的延迟为 2 毫秒或 5 毫秒，他们不会注意到任何差异。
谁说我很担心？

标签： jquery onclick

【解决方案1】：

比较方法 1 和方法 2，内联的“onclick”会更快，因为不需要遍历 DOM 来搜索正确的节点（首先搜索 id，然后搜索带有 id 的元素）。但老实说，我认为额外的性能（实际上并没有那么/重要，除非您可能正在编写高性能游戏等）并没有超过第一种方法提供的代码分离改进。

在我看来，你的最后一段代码是你应该避免使用的。当需要跨一系列元素处理事件（例如，在大表中捕获每个 td 上的点击事件）时，应该（imo）使用这种形式的 on-method 和 selector 参数。在这种情况下，这是一个很大的性能改进，因为您只需要一个事件处理程序，而不是可能成百上千。但是，您正在使用 id-selector 进行操作，因此您仅将它用于一个元素。我理解如果元素是动态插入的，它将起作用，但是您应该等待绑定事件直到插入元素之后，然后采用常规方式捕获事件。

在这种情况下，onclick 方法也可以工作，我认为它会提高性能，但同样，它不值得，因为您牺牲了代码分离。

【讨论】：