jquery - 选择器 : Be specific on right-hand side?

Question

Learn jQuery说:

Be specific on the right-hand side of your selector, and less specific on the left.

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

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

我理解左侧的部分，但是具体到右侧尺寸的部分呢？这在现代浏览器上有多真实？据我所知，Sizzle 引擎并未在现代浏览器上使用。让我们将“未优化”的示例修改为此，以包括我们需要通过删除 div 在右侧“具体”的事实:

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

对于我们的“优化”示例(对于现代浏览器):

1. 在 .data 上调用 queryselectorall
2. 从第 1 步的结果集中获取 td 上的 getElementsByTagName。
3. 从第 2 步的结果集中调用 queryselectorall 获取 .gonzales

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

1. 在 .data 上调用 queryselectorall
2. 从第 1 步的结果步骤中调用 queryselectorall 获取 .gonzales

基本上，我们会跳过第 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