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)

我认为两者都是由浏览器原生处理并且非常优化，但由于其结构扁平且缺乏额外的DOM膨胀，后者会更快吗？

谢谢！

Answer 1

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

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

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

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

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

更新：我更改了jsperf以使用textContent，但这在旧浏览器中不起作用。

Answer 2

我认为你的问题的答案是，＆＃34;它并不重要。＆＃34;

我的想法是，正如评论者建议的那样，你可能想以某种方式对它进行基准测试。

但是，如果我没弄错，document.getElementById是选择页面上单个元素的最快方法;除非您执行的操作数量极端，否则不应该尝试对其进行优化。

Answer 3

但由于结构扁平且缺乏额外的DOM膨胀，后者会更快吗？

除非一个明显且明显慢于另一个，否则请使用最有意义的一个。对象用于数据存储和检索（以及其他内容），DOM旨在以可视方式呈现它。

因此，使用Object进行数据存储和检索，使用DOM以有意义的方式显示它。