jquery的性能可见
我在页面上有一堆复选框，我一次只显示这些复选框的子集。
然后，我执行一些循环遍历所有复选框的操作，并查看是否已选中它们：
例如
$(".delete_items").click( function() { $('.checkboxes' ).each(function(){ //do stuff } } 然后我在想，因为用户永远不会与隐藏的复选框交互，添加：对复选框可见会加快循环
例如
$(".delete_items").click( function() { $('.checkboxes :visible' ).each(function(){ //do stuff } }
但我不知道是否添加：可见会增加更多开销。 有什么想法吗？
: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：
使用两个类似乎更快，我更新了测试用例。
我不太确定隐形复选框是否重要。 如果你不介意包含它们，只需使用类选择器，让querySelectorAll做繁重的工作，正如Felix King所说。
另一方面，如果您确实只关注可见复选框，则可以确定它们的可见性（如果已选中）。 这将显着加快，因为您不需要检查未检查的可见性元素。 您还可以作弊并使用内部jQuery函数jQuery.expr.filters.visible ，这是一种更快速的方式来调用$(this).is(':visible') ：
$('.checkboxes' ).each(function(){ if (this.checked && jQuery.expr.filters.visible(this)) { // checkbox is visible and checked } }
请注意，虽然这在jQuery 1.4.4中有效，但它没有记录，可能随时改变…
正如其他用户所提到的，除非遇到严重的性能问题，否则不要过度优化。 如果您愿意，这个解决方案可能会有用。
编辑一个小的基准测试表明，如果您的要求仅在已检查的可见复选框上工作，我的解决方案大约是$('.checkboxes:visible')两倍，假设您没有应用相关的类。
好吧，你想要添加
$('.checkboxes:visible')
（注意缺少空格）因为你只关心可见的复选框而不是任何可见的项目，它是复选框的后代。 一旦你修复了它，那么，没有…添加一个可见的选择器不应该添加任何明显的开销。
话虽如此，我认为，除非您的页面上有很多复选框，否则您将进行微优化。 除非您真的注意到性能损失，否则不要担心可见或不可见（我认为此时保持状态一致且可预测更好）并使代码正常工作。