Javascript测试结果。有人能解释一下吗？

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

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

您将从JSFIDLE中看到，测试2在绑定click事件之前检查匹配的存在性

测试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个元素上运行了两位代码，我认为是'section'元素集，其中一个元素的类是'yep'

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

结果:

time_1: 0.856ms 
time_2: 0.146ms 

任何人都能为困惑的开发者提供一些帮助吗

谢谢

---

n、 在jquery中，请不要使用其他绑定单击事件的方法进行回复。单击只是用作一个简单的测试

这里要做的主要事情是，第一次查询选择器时，引擎必须比后续查询做更多的工作，后续查询有时可以缓存。如果你这样做的话，你会发现无论哪一个先跑的往往都是跑得慢的

尽管如此，主要是作为旁注，在测试2中，您将查询DOM两次，首先检查

长度，然后连接处理程序。如果缓存了查询，这并不重要，但仍然只需执行一次：

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

但是请注意，在没有任何元素的jQuery集合上调用
click
是无害的no op（不是错误或任何东西），因此不需要
length
检查，除非您还做了一些您没有显示的事情。
这不是比较性能的可靠方式。试试看，我很困惑。哪个是测试一，哪个是测试二？它们在问题中出现的顺序正确吗？@beetrootbeetroot:不，test2是问题中的第一个测试。谢谢@David Hedlund。atmd，这肯定会让人困惑。建议您添加注释，以明确哪种情况更快，哪种情况更慢。@Beetroot Beetroot对不起，Iv没有说得很清楚。急于把问题提出来。TJ，你确定你把这两个案子都搞定了吗？请看我上面的评论。@beetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetrootbeetro。问题中引用的第一个测试是测试2，这是小提琴中的第二个测试。（我对你关于这个问题的评论投了赞成票。）TJ，好的，你说的100%有道理。问题不是这样。@Beetroot:Beetroot我刚刚注意到我在回答中说了“测试1”，而我应该说“测试2”！谢谢你。TJ，尽管有麻烦，为什么测试2要比测试1快？