jquery的性能可见

Question

我在页面上有一堆复选框,我一次只显示这些复选框的子集.

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

例如

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

然后我在思考,因为用户永远不会与隐藏的复选框交互,添加:对复选框可见会加快循环

例如

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

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

Answer 1

:visible 将添加肯定更多的开销,因为jQuery必须检查几个属性元素是否可见:

元素可被视为隐藏,原因如下:

• 它们的CSS显示值为none.
• 它们是type ="hidden"的表单元素.
• 它们的宽度和高度显式设置为0.
• 隐藏了一个祖先元素,因此该元素不会显示在页面上.

来源 - :隐藏选择器| jQuery API文档

特别是最后一点似乎意味着为每个增加开销的元素遍历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:

使用两个类似乎更快,我更新了测试用例.