Javascript测试结果.任何人都能解释一下吗

Question

我最近写了一篇博文,关于在绑定事件处理程序之前检查jquery元素是否存在,我做了一个快速的jsfiddle ,你可以在这里看到

我不明白的是,结果显示(使用chrome以微秒为单位测量)测试2比测试1快很多.

您将从jsfiddle看到测试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我认为'elemenets',其中一个有'yep'类

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

结果:

time_1: 0.856ms 
time_2: 0.146ms 

任何人都可以解决一些混乱的开发人员.

谢谢

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

Answer 1

这里发生的主要事情是,第一次查询选择器时,引擎必须比后续查询做更多工作,后续查询有时可以缓存.如果你颠倒前两个测试,你会发现无论哪一个先跑,往往是较慢的.

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

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

但是请注意,调用click没有元素的jQuery集是一个无害的无操作(不是错误或任何东西),所以length除非你还做了一些你没有显示的东西,否则不需要检查.