jquery - 为什么这个 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]')

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

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

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

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

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

最后，您的第三个示例(最慢的)相当于这样:

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