在 jQuery 中，在尝试绑定事件处理程序之前检查元素是否存在是否更快？答案

【问题标题】：In jQuery, is it faster to check if an element exists before trying to bind event handlers?在 jQuery 中，在尝试绑定事件处理程序之前检查元素是否存在是否更快？
【发布时间】：2014-03-26 05:14:03
【问题描述】：

先检查元素是否存在，然后绑定事件处理程序是否更快，如下所示：

if( $('.selector').length ) {
    $('.selector').on('click',function() {
          // Do stuff on click
    }
}

还是干脆做更好：

$('.selector').on('click',function() {
     // Do stuff on click
}

所有这些都发生在文档准备就绪时，因此延迟越少越好。

【问题讨论】：

if( $('.selector').length ) { $('.selector').on('click',function() { // Do stuff on click } } 会慢得多，因为选择器被评估了两次......如果你缓存它，我认为它不会有太大的不同
should I test whether a target element exists before I bind a function to it?的可能重复
如果速度更快，函数开头会有一个测试。在分析之前添加这样的测试会阻碍可读性以获得未测量的性能增益，这将是一种非常过早优化的情况。
$('.selector').on('click',function() { // Do stuff on click } 如果元素存在则绑定，否则不存在。所以这样更快。
@Bharadwaj 您可以添加您的评论作为答案。

标签： javascript jquery performance

【解决方案1】：

写 if 检查的更好方法是这样

var elems = $('.selector');
if( elems.length ) {
    elems.on('click',function() {
          // Do stuff on click
    });
}

让我们测试一下，看看代码告诉我们什么 http://jsperf.com/speed-when-no-matches

最后，您说的是毫秒级的差异，并且非 if 检查在运行一次时不会引起注意。当有元素要查找时，这也没有考虑到，在这种情况下，还有一个额外的 if 检查。检查是否重要

所以让我们看看他们什么时候找到元素http://jsperf.com/speed-when-has-matches

真的没有区别。因此，如果您想节省几分之一毫秒，请执行 if。如果您想要更紧凑的代码，则不要使用 jQuery 方式。最后它做同样的事情。

【讨论】：

漂亮的图表！人们喜欢图表！

【解决方案2】：

随便用

$('.selector').on('click',function() {
     // Do stuff on click
}

如果 selector 类不存在任何元素，jQuery 将不会绑定任何东西。

【讨论】：

【解决方案3】：

$('.selector').on('click',function() { // Do stuff on click } 如果元素存在则绑定，否则不存在。所以这样更快。

【讨论】：

【解决方案4】：

直接使用绑定。

$('selector').on('click',function() {
    // Do stuff on click
}

如果没有指定选择器的元素，它不会做任何事情 - 甚至不会发布错误，这意味着对元素的实际检查将做两次相同的事情。我不会把它完全称为对元素是否存在的检查，但是在 jQuery 中实现的方式肯定是这样的。

【讨论】：