选择多个项目时的jQuery性能

Posted 2023-05-09

【中文标题】选择多个项目时的jQuery性能

【英文标题】：jQuery performance when selecting multiple items

【发布时间】：2011-01-09 08:01:54

【问题描述】：

这更像是一个好奇的问题。执行以下操作时：

$('.selector1, .selector2').doSomething()

jQuery 是完全遍历 DOM 两次以获取与每个选择器匹配的每组对象，还是在一次遍历 DOM 中找到所有元素？

【问题讨论】：

我不这么认为，因为从我在核心中看到的内容来看，匹配是在各种节点属性（nodeName、NodeType、id 等）上使用正则表达式完成的。所以任何单个选择器都会产生一次 DOM 迭代.但是，我对此不是 100% 肯定的，所以我会遵从其他更熟悉内部结构的人 :-)

实际上这个例子很糟糕，因为<selector2> 节点在 html 中不存在 :)

我想你要做的是找到选择器引擎 Sizzle，你可以看看它的源代码：github.com/jeresig/sizzlegithub.com/jeresig/sizzle/blob/master/sizzle.js

@KARASZI 'doh！被一个错字挫败！我会解决的。 ;o)

【参考方案1】：

我认为它使用本机浏览器功能来找到它，使用：

document.getElementsByClassName()

【参考方案2】：

这真的取决于浏览器。在较新的浏览器中，它将使用 document.querySelectorAll 进行任何 DOM 查询（在后台调用 document.getElementsByClassName 用于类）。在不支持此功能的旧浏览器中，它必须自己解决，这显然会更慢。

一般来说，您应该首先通过 id 查找内容（或至少缩小范围）。类和标签名称将是下一个速度。基本上，原生支持的 DOM 操作是最好的。

【讨论】：

听起来在大多数情况下，每次选择器都会遍历 DOM。虽然它遍历 DOM 的方式会根据选择器的类型（元素、ID 和类）而有所不同？

是的，它将使用正则表达式来拆分您的所有查询并一次执行一个。不过，我不会担心类或 id 的性能。