选择器:具体在右侧？

Question

学习jQuery说:

具体在选择器的右侧,而在左侧则不太具体.

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

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

我理解左侧的部分,但右侧尺寸的具体部分是什么？现代浏览器的真实情况如何？据我所知,Sizzle引擎不适用于现代浏览器.让我们修改我们的"未优化"示例,通过删除以下内容来包括我们需要在右侧"特定"的事实div:

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

对于我们已经拥有的"优化"示例(适用于现代浏览器):

1. 已经queryselectorall拜访了.data
2. 有getElementsByTagName关于td从结果从第1步设置.
3. 调用queryselectorall用于.gonzales从结果从第2步设置

与我们的"未经优化的修改"示例:

1. 已经queryselectorall拜访了.data
2. 呼叫queryselectorall为.gonzales从1,结果一步

基本上,我们正在跳过第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>

火狐 43：

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

铬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 次操作/秒）

野生动物园 5：

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

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