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

Posted 2023-03-05

【中文标题】为啥这个 jQuery 选择器这么慢？

【英文标题】：Why is this jQuery selector so slow?为什么这个 jQuery 选择器这么慢？

【发布时间】：2011-01-18 04:42:01

【问题描述】：

基于测试一个包含 ~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 大致相同。

我很想知道为什么性能差异如此之大？

【参考方案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()  //...

【讨论】：

谢谢。那么每个属性选择器是否分别迭代 DOM 呢？还是只迭代一次，但属性评估更快，因为它只需要检查 id（短路？）而不是多个属性？

你可以这样做... $('#' + code).each(function());这是 JQuery 选择器性能规则的一个很好的链接。 artzstudio.com/2009/04/jquery-performance-rules

@delux，感谢您的链接，注意运算符是 $= 所以 #+code 不起作用。