为什么这个jQuery选择器这么慢？

Question

基于测试一个包含~220个元素的页面，其中~200个是复选框元素，每个元素必须查询一个包含约200个项目的数组，我惊讶地发现input selector：

$("input[id$='" + code + "']").each(function() { //...

比

快约4-5倍

$("input:checkbox[id$='" + code + "']").each(function() { //...

比checkbox selector快<10倍：

$(":checkbox[id$='" + code + "']").each(function() { //...

还尝试了通用选择器*，其执行与input大致相同。

我很想知道为什么这么大的性能差异？

Answer 1

您的第一个示例更快，因为它只涉及检查所有id元素上的input属性。

input:checkbox选择器等同于Attribute Equals选择器：

$('input[type=checkbox]')

所以基本上你在第二个例子中做两个属性选择器：

$("input[type=checkbox][id$='" + code + "']").each(function() { //...

现在在第三个示例中，由于您未指定标记名称或其他任何内容，因此它将检查所有DOM元素，因为:checkbox选择器等同于：

$("*:checkbox")//...

这就是为什么总是建议在这种选择器之前添加标签名称或其他选择器。

最后，你的第三个例子（最慢的）相当于这样：

$("[type=checkbox][id$='" + code + "']").each(function() { //...