Javascript getElementById查找 - 哈希映射還是遞歸樹遍歷？

Question

DOM是否有一個元素的哈希表，其鍵是元素'ID？
我想知道document.getElementById查找哈希表或遍歷整個樹。
這種行為在瀏覽器中有所不同嗎

Answer 1

我知道Firefox和WebKit DOM實現，它們都使用哈希表來查找元素，深入研究它們的來源，你可以看看內部實現：

如果id是唯一的，WebKit實現Document.cpp使用哈希表，否則它遍歷文檔以獲得第一個匹配：

Element* Document::getElementById(const AtomicString& elementId) const
{
    if (elementId.isEmpty())
        return 0;

    m_elementsById.checkConsistency();

    Element* element = m_elementsById.get(elementId.impl());//<-- hastable lookup
    if (element)
        return element;

    if (m_duplicateIds.contains(elementId.impl())) {
        // We know there's at least one node with this id,
        // but we don't know what the first one is.
        for (Node *n = traverseNextNode(); n != 0; n = n->traverseNextNode()) {
            if (n->isElementNode()) {
                element = static_cast<Element*>(n);
                if (element->hasID() &&
                element->getAttribute(element->idAttributeName()) == elementId) {
                    m_duplicateIds.remove(elementId.impl());
                    m_elementsById.set(elementId.impl(), element);
                    return element;
                }
            }
        }
        ASSERT_NOT_REACHED();
    }
    return 0;
}

Firefox實現， nsDocument.cpp

Answer 2

實現可以自由地做任何他們喜歡的事情，但由於id被定義為唯一值，因此使用哈希映射或類似的查找機制而不是遍歷似乎是明智的。 但是，當您進入構建具有許多（有時相互矛盾的）命令的復雜Web瀏覽器的管道時，外部看起來似乎是明智的。

我做了一個簡單但非常簡單的測試（請參閱答案末尾的頁面）。 這非常簡單，尤其是因為我們不知道瀏覽器不會緩存以前的結果。

Chrome 4.1.249.1059報告：

ID: 0.0082ms per lookup
Tag: 0.0249ms per lookup

因此，ID比標簽名稱快得多。

IE7報告：

ID: 2.4438ms per lookup
Tag: 0.0437ms per lookup

標簽名稱比ID快得多（但請記住IE7有一個破壞的getElementById概念 ;這在IE8中得到修復）。

IE8 （在不同的機器上 ，不比較絕對值，我們正在查看測試的瀏覽器中的差異）報告：

ID: 1.1335ms per lookup
Tag: 0.0287ms per lookup

所以和IE7一樣。

Firefox 3.6.3報告：

ID: 0.0042ms per lookup
Tag: 0.006ms per lookup

所以它並不在乎（重復請求; 再次，它可能是緩存）。

Opera 10.5.1報道：

ID: 0.006ms per lookup
Tag: 1.467ms per lookup

ID比標簽名稱快得多。

按照你的意願制作這些結果。 需要一個更復雜的測試用例來真正推斷出這些機制。 當然，至少在其中兩個案例中（Firefox和Chrome）， 我們可以看看源代碼 。 CMS友好地指出了WebKit和Firefox的實現（並且看着它，我對緩存的懷疑可能是錢）。

測試頁面：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
#log p {
    margin:     0;
    padding:    0;
}
</style>
<script type='text/javascript'>
window.onload = pageInit;
function pageInit() {
    document.getElementById('btnGo').onclick = btnGoClick;
}
function btnGoClick() {

    log("Testing...");
    setTimeout(run, 0);
}

function run() {
    var count, time;

    try {
        // Warm up
        testid(10);
        testtag(10);

        // Test
        count = 10000
        time = testid(count);
        log("ID: " + (time / count) + "ms per lookup");
        time = testtag(count);
        log("Tag: " + (time / count) + "ms per lookup");
    }
    catch (e) {
        log("Error: " + (e.message ? e.message : String(e)));
    }
}

function testid(count) {
    var start;

    start = new Date().getTime();
    while (count-- > 0) {
        if (!document.getElementById('fred')) {
            throw "ID 'fred' not found";
        }
    }
    return new Date().getTime() - start;
}

function testtag(count) {
    var start;

    start = new Date().getTime();

    while (count-- > 0) {
        if (document.getElementsByTagName('em').length == 0) {
            throw "Tag 'em' not found";
        }
    }
    return new Date().getTime() - start;
}

function log(msg) {
    var log = document.getElementById('log');
    log.innerHTML += "<p>" + msg + "<\/p>";
}
</script>
</head>
<body><div>
<input type='button' id='btnGo' value='Go'>
<div id='log'></div>
<hr>
<div>test test<span>test<span>test<span>test<span>test</span></span></span></span></div>
<div>test test<span>test<span>test<span>test<span>test</span></span></span></span></div>
<div>test test<span>test<span>test<span>test<span>test</span></span></span></span></div>
<div>test test<span>test<span>test<span>test<span>test</span></span></span></span></div>
<!-- repeat the above a couple of thousand times; I had about 2,200 -->
<div>test test<span>test<span>test<span>test<span>test</span></span></span></span></div>
<div>test test<span>test<span>test<span>test<em id='fred'>test</em></span></span></span></div>
</div></body>
</html>

Answer 3

HTML規范中未定義具體實現，因此可以輕松地將瀏覽器更改為瀏覽器。 例如IE文檔說明

返回對具有指定ID或NAME屬性值的第一個對象的引用。

所以我很想說它會進行搜索（或者只是在哈希沖突的情況下拋出元素）。

編輯還要記住，還有其他數據結構（如樹）允許訪問時間介於常量和線性之間。

Answer 4

它應該不難測試。

如果它是基於樹的，那么制作一個非常深的樹（通過Javascript）應該是一個很好的測試用例。

Javascript getElementById查找 - 哈希映射還是遞歸樹遍歷？

問題描述

4 個解決方案

解決方案1
24 2010-04-26 06:41:47

解決方案2
12 已采納 2010-04-26 06:35:28

解決方案3
2 2010-04-26 05:45:25

解決方案4
0 2010-04-26 05:40:43

Javascript getElementById查找 - 哈希映射還是遞歸樹遍歷？

問題描述

4 個解決方案

解決方案1 24 2010-04-26 06:41:47

解決方案2 12 已采納 2010-04-26 06:35:28

解決方案3 2 2010-04-26 05:45:25

解決方案4 0 2010-04-26 05:40:43

解決方案1
24 2010-04-26 06:41:47

解決方案2
12 已采納 2010-04-26 06:35:28

解決方案3
2 2010-04-26 05:45:25

解決方案4
0 2010-04-26 05:40:43