使用JavaScript/jquery按id查找和按类查找之间是否存在效率差异？

使用JavaScript/jquery按id查找和按类查找之间是否存在效率差异

一个比另一个好吗？如果是这样，是因为ID或Class的索引是在DOM的某个地方建立的吗

它最终是否无关紧要？

无论在哪里（

getElementById（）

，

$（“#ID”）

，甚至在常规CSS中，按ID查找总是更快

由于每个页面的ID都是唯一的，因此查找它们的速度要快得多

---

此外，当使用

$（'#id'）

时，jQuery将把它映射回内置的

getElementById（）

，这是查询DOM的最快方法。

从逻辑上讲，id效率更高，因为它只有一个，所以一旦找到它，它就会停止搜索。但是，我不熟悉jQuery源代码，我不知道它实际上是如何工作的，这是从逻辑角度来看的。

对于大多数浏览器，按id搜索和按类名搜索的速度差异取决于给定类中有多少元素。充其量只有一个这样的元素，搜索速度应该是相同的。最糟糕的情况是，给定类中有大量元素。但是，通常情况下，您不必担心搜索包含相同类的10-20个元素的速度

---

然而，一个关键的警告是：MSIE与同事们就速度权衡是否值得改进一些现有的实现进行了辩论；我认为我们不太可能看到任何区别。“一个比另一个好吗？”-ID和类用于不同的事情，因此它们不可比较。您可以为页面上的唯一元素使用ID，为共享类似表示/行为的元素集使用类。为什么不根据您的用例设计一个基准，并尝试两种方法呢？例如，获取几个页面的平面源文件，并为要测试的一组节点应用唯一id。然后在它和原始的基于类的实现上运行jQuery（使用单独的源文件以避免缓存/记忆）。我怀疑，虽然它们可能有很大的相对差异，但绝对差异将是微不足道的。此外，我刚刚记得，sizzle.js选择器引擎（为jQuery提供动力）从右向左解析。这意味着您可以通过改进查询右侧的特定性来获得更好的性能。可能是

#myId>li

的性能比

.myLiClassName

差得多。如果将其理解为一项通用策略，您会夸大其差异。他确实会问这是否重要，这取决于具体情况。在许多情况下，答案是“否”。@Richard Simões-AFAIK，文档大小将是效率差异的最大贡献者。jQuery查看选择器，如果它自己找到一个“#xxx”，它将使用

getElementById（）

。如果不可用，它将使用Sizzle选择器引擎，如果可用，它将依次使用

querySelectorAll（）

，如果不可用，它将使用自己的基于JS的选择器引擎。

取决于有多少元素具有给定的类

。不，这仅仅取决于DOM的大小。