为什么这个 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

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

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

$('input[type=checkbox]')

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

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

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

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

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

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

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