JavaScript id + class vs. class selector performance

Question

我想知道选择驻留在具有ID的元素中的元素类更快。例如，假设我们有一个列表，ul 包含 id="list" 和 li 元素与 class="list" ，那么哪个更快（和/或更好的做法）：

document.GetElementById('list').getElementsByClassName('list')

或

document.getElementsByClassName('list')

我知道前者将仅针对#list元素中的元素，让我们假设该类对于整个文档是唯一的。

Answer 1

getElementsByClassName 是一个 O（n） 操作，因为它必须检查每个元素以检查所检查的类名是否存在。如果n受到限制，则速度将增加，但是速度差异很小，因为操作的整体速度仍将为O（n）。

因此，这是微优化的一个例子。两者都没有明显快。使用子选择器应与页面组成相关，以便根据速度考虑来区分页面的样式部分。

Answer 2

第一个应该是最快的，因为按类名检索元素将限制在该列表元素。但是，这取决于浏览器如何在内部索引元素。

您可以在此处运行一些基准测试：http://jsperf.com/javascript-select-by-id-vs-by-class

在我的测试中，第二种方法在chrome和IE上更快，但在FF上大致相同。这意味着基于类名和FF的Chrome和IE索引元素大多没有或做得很差。