3

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

这来自我有一个表格的情况，说它#myForm包含一个<button class="button">

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

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

4

1 回答 1

1

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

  • ID，例如#header
  • 类，例如 .promo
  • 类型，例如 div
  • 相邻兄弟，例如 h2 + p
  • 孩子，例如 li > ul
  • 后代，例如 ul a
  • 通用，即 *
  • 属性，例如 [type="text"]
  • 伪类/元素，例如 a:hover

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

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

  • getElementById
  • getElementsByTagName
  • getElementsByClassName // ie8 不支持这个
  • 查询选择器
于 2013-10-22T23:11:38.373 回答