在DOM元素中添加ID会对JavaScript性能产生什么影响？

Question

例如，我有一个网站，其动态生成的DOM部分大致如下：

<div id="master">
  <div class="child"> ... </div>
  <div class="child"> ... </div>
  <div class="child"> ... </div>
  ...
  <div class="child"> ... </div>
</div>

可能会有数百个这样的子元素，它们也可能有更多的子元素。目前，除了主元素之外，它们都没有id。Javascript通过dom-walking操纵它们。这有点可怕。

我想添加id，例如:

<div id="master">
  <div id="child1" class="child"> ... </div>
  <div id="child2" class="child"> ... </div>
  <div id="child3" class="child"> ... </div>
  ...
  <div id="childN" class="child"> ... </div>
</div>

在这些div中添加id的权衡是什么？显然，jQuery必须维护一个id哈希表，因此会有一定的性能损失。何时添加额外的id是一个不好的想法？jQuery是否如此强大，以至于在实践中并不重要？

- Jude Allred

---

您能展示一下您打算如何查询这些元素吗？ - David Murdoch

有一个 AJAX 请求将从数据库中获取一组 ID，这些 ID 将接收特殊的标记。例如，我可能想要突出显示子元素 {5、13、25...}。在页面渲染时，不知道要查询的子集。 - Jude Allred

Answer 1

当然，jQuery必须维护一个id的哈希表。

不是的。浏览器（作为一种优化方式）保留了从id到节点的查找。如果您以一种导致jQuery向元素添加数据的方式与对象交互（包括如果您添加事件侦听器），那么它将为查找目的添加自己的jquery-id到该元素。但无论该元素是否具有id属性，它都会这样做。

如果您需要从其他元素中选择特定元素，则添加id。但是，如果您已经有类，则没有必要为每个子元素添加childN属性。选择器#master>.child可能比#master>[id^=child]更快，并且肯定比在循环中单独获取每个idN要快得多。

- bobince

Answer 2

由于ID是唯一的，因此在查询页面时比类更快。它们仅适用于一个元素。

话虽如此，将ID添加到所有内容中确实会使您的代码变得混乱不堪。现在，由于框架为我们完成了大部分工作，从父级进行DOM遍历通常在编程方面更加方便。

但是，通常我们希望对整个元素组执行功能。在这种情况下，使用类是有意义的。在许多ID上执行组函数将是低效的。

添加ID本身不会造成任何性能损失，这完全取决于您打算如何使用页面。

- Diodeus - James MacFarlane