为什么querySelector（'#id'）映射到document.getElementById（'id'）？

Question

我最近进入了选择器性能，当我传递一个简单的#id时，当前实现Selectors API的浏览器不使用document.getElementById ，这让我很#id 。

性能损失是巨大的 ，因此图书馆作者继续以自己的方式实现。

有任何想法吗？

Answer 1

在做出上述评论后，我决定遵循：

来自Chromium源中的Node.cpp

if (strictParsing && inDocument() && querySelectorList.hasOneSelector() && querySelectorList.first()->m_match == CSSSelector::Id) {
    Element* element = document()->getElementById(querySelectorList.first()->m_value);
    if (element && (isDocumentNode() || element->isDescendantOf(this)) && selectorChecker.checkSelector(querySelectorList.first(), element))
        return element;
    return 0;
}

因此它确实映射到getElementById，只是解析查找选择器的字符串是一项昂贵的操作。

Answer 2

TBH。 性能损失是微不足道的......我真的怀疑你每秒会做100,000次id查找，如果你这样做，那么QSA性能实际上是你应该看的最后一件事。

至于为什么，添加一个额外的if / else可能会使id查找更高效，但是其他css选择器将会变得更慢（仍然无关紧要）。 为什么要优化QSA来处理id查找，而有专门的方法可以更快地完成更快的任务。

无论如何，浏览器的目标是速度，而忽略这样的东西会使整体性能图表看起来好多了。 在这个基准测试中，它几乎每一毫秒，但对于开发人员......请务必，其他基准测试更重要，QSA性能不再是一个因素。

至于开发人员的方便，它可以工作，它仍然是如此之快，你不会在实际应用程序中注意到它（我挑战你告诉我它在哪里是显而易见的，同时仍然是一个理智的程序; o）。

Answer 3

我正在比较getElementById()和querySelector() ，发现有人已经进行了性能比较和计算 。

看起来好像querySelector() 每次都获胜......而且相当多 。

Answer 4

也许是因为如果他们这样做，他们将不得不增加一个检查，看看它的一个简单的ID查询（无修饰符），这将每隔查询慢下来？ 这项测试可能不是一个巨大的性能影响，但很难为其他开发人员说话。

我想如果你担心它，你可以添加一个func，如getObByID，用于检查文档，getElementById，如果它存在则使用它，否则使用选择器。 也许开发人员觉得不需要在自己轻松完成时添加这种类型的抽象，开发人员应该记住使用它，并增加学习曲线。