Question

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

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();
});

当然，我正在使用其中一些动态加载的内容，以便功能保持活跃。我猜测性能受到的影响大多与此有关整个功能需要保存在内存中，可能会被重新启动一遍又一遍地检查是否应该再次开火。而不是这种代码，我最近意识到我还可以在中添加一个onclick =“doingness（）” 相反，我的问题是，这有助于提高性能吗？

Answer 1

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

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

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

jquery性能 - .on与onclick（）

1 个答案: