javascript - 哈希表比 document.getElementById 更快吗？

Question

如果我有一个这样的节点:

    <!-- lots of HTML here (including lots of nest unordered lists) -->
    <span id="spn123">Test</span>
    <!-- lots of html here -->

隐藏在许多级别的 HTML 下，我还有一个像这样的 JavaScript 哈希表:

[
 /* lots of nodes here */
 { 123 : 'Test' }
 /* lots of nodes here */ 
]

那么使用起来会不会更快

document.getElementById('spn123').innerText;

或

data(123)

我假设两者都是由浏览器 native 处理的，并且都经过了非常优化，但后者会因为其扁平结构和缺乏额外的 DOM 膨胀而更快吗？

谢谢!

Answer 1

了解为什么同时拥有对象和 DOM 表示形式可能会很有用。我假设哈希是唯一的事实来源，并且 DOM 相应地呈现哈希。

我希望哈希查找更快，因为 DOM 可能很慢，但这主要是写入 DOM，而不是读取 DOM。我做了一个JS Perf并且结果因浏览器的不同而有很大差异。

在这些场景中，我喜欢创建一个函数来抽象实现，以便以后可以更改它，而无需在代码中找到对查找的每个引用:

function getItem(id) {
    return hash[id];
}

如果您以后找到更优化的方式来查找数据，您只需更改该函数即可。

更新: 我将 jsperf 更改为使用 textContent，但这在旧版浏览器中不起作用。