jquery - jquery的性能可见

Question

我的页面上有一堆复选框，并且一次只显示这些复选框的子集。

然后我执行一些操作，循环遍历所有复选框并查看它们是否被选中:

例如

$(".delete_items").click( function() {
     $('.checkboxes' ).each(function(){
     //do stuff
     }
}

然后我在想，既然用户永远无法与隐藏的复选框交互，那么向复选框添加 :visible 会加速循环

例如

$(".delete_items").click( function() {
     $('.checkboxes :visible' ).each(function(){
     //do stuff
     }
}

但我不知道添加 :visible 是否会增加更多开销。有什么想法吗？

Answer 1

:visible 肯定会增加更多开销，因为 jQuery 必须检查多个属性，以确定元素是否可见:

Elements can be considered hidden for several reasons:

• They have a CSS display value of none.
• They are form elements with type="hidden".
• Their width and height are explicitly set to 0.
• An ancestor element is hidden, so the element is not shown on the page.

Source — :hidden Selector | jQuery API Documentation

尤其是最后一点似乎意味着要遍历 DOM 来查找每个元素，这会增加开销。

如果您只使用类作为选择器，jQuery 可以利用浏览器函数，例如 getElementsByClass 或 querySelectorAll。

另一方面，如果您对这些复选框执行计算复杂的操作，则循环遍历较少的复选框可能会比之前的查找更重要。

您绝对必须自己进行基准测试。

更新:

将另一个类分配给可见复选框并选择它们的另一个想法

$('.checkboxes.otherClass')

这肯定比使用 :visible 更快。

更新2:

我创建了一个jsPerf:http://jsperf.com/jquery-visible-test

这可能不是最好的测试用例，但至少对我来说(Chrome 8、Mac OS X 10.6)，使用 :visible 速度慢了约 45%(在 Firefox 3.6.13 中更慢) :约慢 75%)。

更新3:

使用两个类似乎更快，我更新了测试用例。