Javascript jQuery选择器：为什么$（“id”）.find（“p”比$（“id p”）快

此页面的作者：断言jQuery选择器

$（'#id'）。find（'p'）

比

$（'#id p'）

快，尽管如果我理解正确，可能会产生相同的结果。造成这种差异的原因是什么？

因为

$（'#id'）。find（'p'）

优化了它的功能

document.getElementById('id').getElementsByTagName('p');

…而我猜，

$（“#id p”）

将使用

querySelectorAll

（如果可用），或者使用基于JavaScript的选择器引擎（如果不可用）

---

您应该注意，不同浏览器之间的性能总是不同的。众所周知，Opera具有极快的

查询选择器all

另外，不同版本的jQuery可能会有不同的优化

---

可能是

$（'#id p'）

将（或目前）获得与第一个版本相同的优化。

它是特定于浏览器的，因为jQuery在可用时使用

querySelectorAll

。当我在WebKit中测试时，它确实更快。事实证明，

querySelectorAll

针对这种情况进行了优化

在WebKit内部，如果整个选择器是

#

，并且文档中只有一个元素具有该id，那么它将优化为

getElementById

。但是，如果选择器是其他内容，

querySelectorAll

遍历文档，查找匹配的元素

是的，应该可以优化这个案例，使它们执行相同的操作——但是现在，没有人这样做。您可以在WebKit源代码中找到它，

SelectorDataList:：execute

使用

SelectorDataList:：canUseIdLookup

来决定是否使用

getElementById

。看起来是这样的：

if (m_selectors.size() != 1)
    return false;
if (m_selectors[0].selector->m_match != CSSSelector::Id)
    return false;
if (!rootNode->inDocument())
    return false;
if (rootNode->document()->inQuirksMode())
    return false;
if (rootNode->document()->containsMultipleElementsWithId(m_selectors[0].selector->value()))
    return false;
return true;

---

如果在非WebKit浏览器中进行测试，则可能缺少类似的优化。

我假设

querySelectorAll（'#id p'）

也进行了相当优化。性能差异应该测试，而不是断言。@Tomalak：我已经对

qSA

做了足够多的测试，知道在大多数浏览器中，相比之下，它确实相当慢。这不是一个随机的断言。请看我关于Opera的更新。我并没有说qSA总是更快。实际上，我说“我假设”是为了证明我的观点。毕竟，考虑到jQuery和浏览器版本的巨大差异，无论如何都很难支持这样一个通用语句。至少我无意指出我的最新情况。我的观点是/是我同意你关于

qSA

优化的可能性。