HTML DOM,ID与无ID？

Question

如果你有一个包含数百个非常简单的子元素的容器div,如下所示:

<div id="stuffContainer" class="item-container">
    <div class="single-item"></div>
    <div class="single-item"></div>
    <div class="single-item"></div>
    <div class="single-item"></div>
    <div class="single-item"></div>
    <div class="single-item"></div>
    [...]
</div>

会以任何(有意义的)方式为每个单元素包含一个唯一的id损害(客户端)性能,无论是渲染,javascript还是内存明智？

为什么我要问:我可能不时需要参考具体项目,我想弄清楚我是否应该提前预先计算出我需要选择哪些项目,给他们提供ID并将其余部分留下来,或者只是将id分配给所有这些,这将使过程更加直接,但我想知道这可能是某种矫枉过正.

如果有人可以谈论现代浏览器如何处理它以及为什么它在浏览器呈现和管理DOM方面不会产生影响,那么奖励积分(如果我能真正给予它们).

Answer 1

我猜测浏览器最多要做的几件事就是在构建 DOM 结构时将 ID 作为属性分配给每个元素，并将 ID 存储在哈希表中以方便选择器等操作#id，document.getElementById()稍后进行 idref 查找。我认为这不会对观察到的性能或内存使用造成哪怕是轻微的影响，因为哈希表和 DOM 被设计得非常优化。

也就是说，如果您的元素根本不需要 ID ，那么为它们分配 ID 就毫无意义；相反，你最终会得到大量的标记膨胀。正如 Dan Davies Brackett 提到的，这显然会导致速度减慢，因为它取决于客户端连接。

如果您有能力使用 CSS 选择器引用这些元素，那么您始终可以使用它:nth-child()来查找特定的子元素。如果您需要支持旧版浏览器，总有 CSS2 解决方案。看看这些问题：

• 如何使用 CSS 获得第二个孩子？
• 如何使用 CSS2 选择器获取元素的第 n 个子元素？