页面中的 ID 数量是否会影响选择器的效率？答案

【问题标题】：Does the number of IDs in a page impact the efficiency of the selectors?页面中的 ID 数量是否会影响选择器的效率？
【发布时间】：2016-06-09 22:20:34
【问题描述】：

在一个大的 html 页面中，id 选择元素的速度是否取决于定义了id 的元素的总数？

考虑以下场景：我们有一个包含数万个 dom 元素的大 html 页面，并且我们有 10000 多个看起来像这样的元素：

<div id="tooltip555">
     <label>Tooltip</label>
     <div>
          <i class="icon"></i>
          <span>Tooltip body</span>
          ...
     </div>
</div>

我知道直接通过 ID (Performance of jQuery selector) 选择元素会更快，所以从技术上讲，而不是使用链式选择器（如“#tooltip555 > div > span”）选择 tooltip555 内的组件会不会如果我为我计划使用的每个孩子生成一个 id 并使用 #tooltip555_div_span 选择它，但会产生 3 倍的具有已定义 id 的 dom 元素，会更快吗？

【问题讨论】：

id 属性的数量，没有。元素的数量，是的。但是，除非您有数以万计的元素，否则这应该不是问题。在这种情况下，我将使用 #tooltip555 > div > span 选择器。 id 选择器将大大减少被过滤的元素匹配集，因此性能应该很好。
嗯，我首先想到的是，一旦你指定了一个选择器，jQuery 必须至少遍历所有的选择器，所以id, @ 987654330@ 等应该没关系。
@RoryMcCrossan，我问这个是因为我确实有性能问题，我有一个动态更新其内容的单页网站，并且生成更多元素然后删除，导致一些脚本涉及许多选择懒惰。我知道我应该重新设计一些算法，但我只是想知道是否可以使用更多/更少的 ID 并减少/增加选择器的复杂性来节省一些时间

标签： jquery html performance

【解决方案1】：

如果你避免使用选择器会更快，因为它需要解析 DOM，而不是大多数浏览器预先存储在地图中的 id。例如，您可以通过 chrome 中的 window["elementId"] 访问带有 id 的元素。也不要忘记，除非您使用 ":first"，否则即使在找到第一个（也是唯一的）元素之后，jquery 也会继续查看 dom。

我会使用：$(document.getElementById("elementId")) 以获得最佳性能。

但我再次高度怀疑您的性能问题是否源于此，99% 的时间是过度的 dom 操作或内存泄漏导致问题。

【讨论】：