选择器：具体在右侧？

Question

Learn jQuery 说：

在选择器的右侧要具体，不要具体 在左边。

// Unoptimized:
$( "div.data .gonzalez" );

// Optimized:
$( ".data td.gonzalez" );

我了解左侧的部分，但是要具体说明右侧尺寸的部分呢？这在现代浏览器上有多真实？据我所知，现代浏览器不使用 Sizzle 引擎。让我们修改我们的“未优化”示例，通过删除div，在右侧包含我们需要“特定”的事实：

// Unoptimized modification:
$( ".data .gonzalez" );

对于我们的“优化”示例（对于现代浏览器）：

1. 已调用 queryselectorall .data
2. 在步骤 1 的结果集中将 getElementsByTagName 放在 td 上。
3. 从步骤 2 的结果集中为 .gonzales 调用 queryselectorall

对比我们的“未优化修改”示例：

1. 已调用 queryselectorall .data
2. 从 1 的结果步骤中为 .gonzales 调用 queryselectorall

基本上，我们跳过了第 2 步。所以不会：

$( ".data .gonzalez" );

跑得比：

$( ".data td.gonzalez" );

让“特定于选择器右侧大小”的原则在现代浏览器中已过时？

Answer 1

使用此 HTML：

<div class="data">
  <table>
    <tr>
      <td class="gonzalez">test1</td>
      <td>test2</td>
      <td class="gonzalez">test3</td>
    </tr>
  </table>
</div>

Firefox 43：

$("div.data .gonzalez");、$(".data td.gonzalez"); 和 $(".data .gonzalez"); 相等（+/- 84866 次操作/秒）。

Chrome 47：

$(".data .gonzalez"); 是最快的（+/- 166496 操作/秒）。

$("div.data .gonzalez"); 和 $(".data td.gonzalez"); 有点慢（+/- 163243 操作/秒）。

IE 11：

$(".data .gonzalez"); 是最快的（+/- 55015 操作/秒）。

$("div.data .gonzalez"); 和 $(".data td.gonzalez"); 有点慢（+/- 42490 操作/秒）

歌剧 34：

$(".data .gonzalez"); 和 $(".data td.gonzalez"); 是最快的（+/- 148887 操作/秒）。

$("div.data .gonzalez"); 有点慢（+/- 135785 次操作/秒）

Safari 5：

$("div.data .gonzalez");、$(".data td.gonzalez"); 和 $(".data .gonzalez"); 相等（+/- 63560 次操作/秒）。

我在这里创建了一个测试：http://jsperf.com/compare-selector