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是如此令人敬畏，在实践中，它并不重要？

Answer 1

当然，jQuery必须维护一个ids的散列

不。它是浏览器（可选地，作为优化）保持id到节点的查找。

如果以某种方式与对象交互，导致jQuery将data添加到元素（包括添加事件侦听器），那么它会将自己的jquery-id添加到元素中以供查找。但无论元素是否具有id属性，它都会这样做。

如果您需要从其余元素中挑选出特定元素，请添加id s。但是，当您已经有类时，向每个子项添加childN属性是没有意义的。选择器#master>.child可能比#master>[id^=child]更快，当然比在循环中单独获取每个idN要快得多。

Answer 2

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

话虽如此，向所有内容添加ID确实会给代码带来很多混乱。由于框架为我们做了繁重的工作，所以从父母那里走来走去通常会更方便。

但我们经常想要对整个元素组执行函数。在这种情况下，使用类是有意义的。对一大堆ID执行分组功能效率很低。

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

将id添加到dom元素中的javascript性能权衡是什么？

2 个答案: