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

Question

基于测试一个包含~220个元素的页面,其中〜200个是复选框元素,并且每个元素必须查询一个包含~200个项目的数组,我很惊讶地发现输入选择器:

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

大约快4-5倍

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

并且比复选框选择器快大约10倍:

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

还尝试了通用选择器*,它的表现大致相同input.

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

Answer 1

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

的input:checkbox一个选择器是等效属性等于选择器:

$('input[type=checkbox]')

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

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

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

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

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

最后,你的第三个例子(最慢的)相当于这样的事情:

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