哪种 CSS 选择器样式更高效？答案

【问题标题】：Which CSS Selector style is more efficient?哪种 CSS 选择器样式更高效？
【发布时间】：2011-04-18 10:08:31
【问题描述】：

受Help understanding JQuery Attribute Equals Selector启发，问题是：

哪一个更高效？

$('#FOO element.BAR[attr=BAZ]')

或

$('#FOO element[attr=BAZ].BAR')

是的，我们可以省略最初的 #FOO 选择器，但这个问题特别问这个问题，所以......所以

另外，虽然我上面的语法使用了 jQuery，但这只是因为我可以方便地保留它。 ~~在 CSS 文档中会发现相同的语法，不是吗？~~ 显然不一样，那么让我们将其限制为 jQuery？

【问题讨论】：

"在 CSS 文档中可以找到相同的语法，不是吗？"是的，但它通常是一个完全不同的实现（如果使用querySelectorAll 除外），所以你应该将你的问题限制在 jQuery 上。
@Matthew Flaschen ~ 你能解释一下吗？完全不同的实现，你是指 DOM 解析器吗？
CSS 解析器和用于确定哪些 DOM 元素匹配哪些选择器不同的代码。
@Matthew Flaschen ...因此我的好奇心和问题;）
您在问哪个更有效，但我的意思是，这实际上（至少）是两个不同的问题。可能#1 对 jQuery 的选择器引擎更有效，但当浏览器直接将其解释为 CSS 时，#2 更有效。或相反亦然。当然，这也取决于哪个浏览器。

标签： jquery-selectors performance

【解决方案1】：

相当的quick and dirty demo 显示两种方法之间存在 1-5 毫秒的差异，并且两者之间的不一致更快。不过我想测试可以大大改进。

无论如何，超过十次页面加载（所有时间都以毫秒为单位）：

page load     |       $('#foo td.one[title=baz]')     |        $('#foo td[title=baz].one')
--------------+---------------------------------------+---------------------------------------
1             |                 9                     |                    8
2             |                 7                     |                    6
3             |                 8                     |                    8
4             |                 8                     |                    8
5             |                 8                     |                    7
6             |                 8                     |                    8
7             |                 7                     |                   11
8             |                 8                     |                    7
9             |                 7                     |                    7
10            |                 8                     |                    8
--------------+---------------------------------------+----------------------------------------
total         |                78                     |                   78

所以...就我可以从中得出任何事情的结论而言，$('#foo td.one[title=baz]') 似乎略微更快，但平均而言，它们的结果大致相同.

【讨论】：

如果您要进行基准测试的 jQuery 版本明确说明会有所帮助，因为不同的版本对选择器有不同的优化。