為什么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，如果它存在則使用它，否則使用選擇器。 也許開發人員覺得不需要在自己輕松完成時添加這種類型的抽象，開發人員應該記住使用它，並增加學習曲線。