测试DOM选择器效率的方法

Question

是否有任何直接的方法来评估页面上的 DOM 选择器效率？我的好奇心来自一个用 jQuery 编写的页面，但理想情况下我正在寻找更通用的东西（我欣赏选择器的效率可能因用于定位它的方法而异）。

这是因为我有一个表格，比如#myForm，其中包含一个<button class="button">

作为选择器，我使用了#myForm button，但显然我可以使用#myForm .button、#myForm button.button 和其他一些替代方案。

虽然在这个例子中不同之处是微不足道的，但我想知道是否就最佳方法达成了普遍共识，此外，是否有一种简单的方法可以将各种测试页面放在一起来试验组合。这让我意识到我不知道如何对选择器进行性能测试，是否有人有任何首选路线来执行此类操作？任何想法表示赞赏。

Answer 1

根据这篇文章的dom选择器的顺序： http://csswizardry.com/2011/09/writing-efficient-css-selectors/

• ID，例如#标题
• 类，例如.promo
• 类型，例如div
• 相邻兄弟，例如h2 + p
• 儿童，例如li>ul
• 后代，例如一个
• 通用，即*
• 属性，例如[type="文本"]
• 伪类/元素，例如a:悬停

我创建了一个带有一些示例选择器的 jsperf 文本，以展示如何测试每个选择器： http://jsperf.com/dom-selector-testing

从这些结果中最快到最慢的是：

• getElementById
• getElementsByTagName
• getElementsByClassName // ie8 不支持这个
• 查询选择器