测试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，例如的#header
• 类，例如.promo
• 类型，例如格
• 相邻的兄弟姐妹，例如h2 + p
• 儿童，例如li> UL
• 后裔，例如ul a
• 环球，即*
• 属性，例如[类型= “文本”]
• 伪类/元素，例如一个：悬停

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

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

• 的getElementById
• 的getElementsByTagName
• getElementsByClassName // ie8不支持此
• querySelector