Question

具体在选择器的右侧，不太具体在左边。
// Unoptimized:
$( "div.data .gonzalez" );

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

我理解左手边的部分，但右边尺寸的具体部分是什么？现代浏览器的真实情况如何？据我所知，Sizzle引擎并未在现代浏览器上使用。让我们修改我们未经优化的＆＃34;这方面的例子，包括我们需要具体的事实＆＃34;在右侧删除div：

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

我们的＆＃34;优化＆＃34;我们有（对于现代浏览器）的例子：

queryselectorall

.data

从步骤1的结果集开始getElementsByTagName td。
从第2步的结果集中调用queryselectorall .gonzales

VS。我们未经优化的修改＆＃34;例如：

queryselectorall

.data

从结果步骤1

queryselectorall

.gonzales

基本上，我们正在跳过第2步。所以赢了

$( ".data .gonzalez" );

跑得比：

$( ".data td.gonzalez" );

制定原则＆＃34;具体取决于选择器的右手尺寸＆＃34;现代浏览器已经过时了？

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

Opera 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

选择器：具体在右侧？

1 个答案: