结论

Question

我想知道......让我们想象一下我的代码是这样的：

$('#specific-element').change(some_long_and_ajax_function);

我的所有网页上都不存在带有绑定ID的元素。仅在其中一些。我确实检查这个元素是否存在：

if($('#specific-element').length > 0){
  $('#specific-element').change(some_long_and_ajax_function);
  // There can be more stuff related to this specific element
}

我的问题：值得吗？绑定处理程序对于不存在的元素是否有任何性能影响，或者检查长度是否比它更糟？或者它基本相同，我有两个无用的行？你会推荐什么？第一个保持代码良好和清晰，但我不确定这对于jQuery是否“健康”有几十个这样的例子。感谢。

Answer 1

如果元素不存在，jQuery会优雅地失败，在内部它会自己检查元素是否存在，如果它没有附加事件处理程序等

jQuery()调用jQuery.fn.init检查传递的参数是否为字符串，在您的情况下，它会使用正确的上下文调用jQuery.fn.find，并在其中执行< / p>

var i, ret = [],
    self = this,
    len = self.length;

... code

for (i = 0; i < len; i++) {
    // add event handlers
}

所以如果没有要运行它的元素，循环永远不会运行，因此不需要自己检查，只需让jQuery处理它。

修改

当你致电$('#specific-element').length时，你已经在调用$()，它会在内部执行所有常规操作，并返回一个类似数组的jQuery对象，该对象具有length属性，并且＆＃39 ;正如$('#specific-element').change...所做的那样，如果集合中没有元素，jQuery的on()也会很快返回，所以确实没有区别。

如果您真的关心速度，那么您可以执行类似
的操作
var el = document.getElementById('specific-element'); if ( el !== null ) { el.addEventListener('change', fn, false); }

但是真的没有理由，只是按照常规方式用jQuery添加事件处理程序，而不检查元素是否存在，几乎每个存在的网站都做了什么，它运行得很好。 / p>

Answer 2

如评论中所述，jQuery检查绑定事件之前元素是否存在。但是你有没有速度差异。

在绑定之前检查时，如果元素不存在，则可以节省时间，因为获取属性（.length）比调用函数（可能会调用其他函数）并且正常失败更快。

但是如果元素存在，那么在绑定之前添加条件会更慢。因此，它增加了1步，而不是之前没有检查并直接绑定事件。

只需解释这些测试结果：http://jsperf.com/check-before-binding ¹

您可以看到，如果元素存在，之前检查之间的差异仅为4000 operations / second。它并不是很多......另一方面，当你检查元素是否存在而它不是时，它会保存1,000,000 operations / second因为它没有调用函数.change()。

结论

我说如果真的很重要，那么之前的检查会更好，但大多数情况下，它并没有。如果元素最常出现而不是在不同页面上丢失，我直接绑定事件。如果元素大部分缺失而不是存在，我会在绑定之前进行检查。

最后，我们谈论的是0.0000001ms ...

¹ _{我稍微改变了代码来优化你的。确保缓存元素非常重要，因为你想要更好的表现。}

jQuery：更好的性能，检查绑定元素是否存在？

2 个答案:

结论