Question

我最近写了一篇关于在绑定事件处理程序之前检查jquery元素是否存在的博客文章，我做了一个快速的jsfiddle which you can see here

我不理解的是，结果显示（使用chrome以微秒为单位测量）测试2比测试1快得多。

你会从jsfiddle看到测试2在绑定点击事件之前检查匹配是否存在

TEST 1是：

console.time('time_1');
    $('.yep').click(function() {
      alert('clicked');
    });
    console.timeEnd('time_1');

测试1只是试图绑定事件

测试2：

console.time('time_2');
if ($('.yep').length) {
  $('.yep').click(function() {
    alert('clicked');
  });
}
console.timeEnd('time_2');

测试2检查绑定前元素是否存在。

我在一些代码上运行两位代码，87我认为'elemenets'，其中一个有'yep'类

我真的不明白为什么第二次测试会更快，因为它做得更多。

结果：

time_1: 0.856ms 
time_2: 0.146ms

任何人都可以帮助解决困惑的开发人员。

感谢

n.b请不要回复用jquery中绑定点击事件的替代方法，.click只是用作一个简单的测试

Answer 1

这里发生的主要事情是第一次时间查询选择器，引擎必须比后续查询做更多工作，后续查询有时可以缓存。如果你reverse the first two tests，你会发现先运行的那个往往比较慢。

尽管如此，并且主要是作为旁注，在测试2中，您要查询DOM 两次，首先检查length，然后连接处理程序。如果查询被缓存它并不重要，但仍然只需执行一次：

console.time('time_x');
var yep = $('.yep');
if (yep.length) {
  yep.click(function() {
    alert('clicked');
  });
}
console.timeEnd('time_x');

但是请注意，在没有元素的jQuery集上调用click是无害的无操作（不是错误或任何错误），因此不需要进行length检查，除非你还做了一些你没有表现过的事情。