javascript - Javascript 测试结果。谁能解释一下？

Question

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

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

您将从 jsfiddle 中看到测试 2 在绑定点击事件之前检查匹配的存在

测试 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 我认为是“部分”元素，其中一个具有“是的”类

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

结果：

time_1: 0.856ms 
time_2: 0.146ms

任何人都可以阐明并帮助困惑的开发人员。

谢谢

注意请不要回复在 jquery 中绑定点击事件的替代方法，.click 仅用作简单测试

score 5 · Accepted Answer

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

尽管如此，并且主要作为旁注，在测试 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检查，除非您还执行其他未显示的操作。

1 回答 1