css3 - jQuery/CSS选择器效率问题

Question

<p id="all">
  <p class="class1">one</p>
  <p class="class1">two</p>
  <p class="class1">three</p>
  <p class="class1">four</p>
  <p class="class2">five</p>
</p>

通过实验发现$("#all").find(".class2")要比$("#all .class2")性能好，为什么呢？
jQuery和CSS都用的是Sizzle选择器引擎，他的解析方式是从右向左。也有说如果最左边指定了id，就会先取id，这时是不是就会从左向右匹配了？

Answer 1

沒看過具體實現，不過，前者顯然是從左到右匹配，後者如果也是，性能應該一樣。既然前者性能更好，那麼顯然後者該是從右向左的了。

可以考慮再做一個測試：

<p id="all">
  <span class="class1">one</p>
  <span class="class1">two</p>
  <span class="class1">three</p>
  <span class="class1">four</p>
  <p class="class2">five</p>
</p>

測試 $("#all").find("p.class2") 和 $("#all p.class2")

Answer 2

Sizzle選擇器引擎的主要工作就是向上兼容querySelectorAll這個API，假如所有瀏覽器都支持該API，那Sizzle就沒有存在的必要性了。
sizzle選擇器一般是從右向左匹配（在不存在位置偽類的時候），Sizzle也不完全是采用從右到左，如果選擇器表達式的最左邊存在#id選擇器，就會首先對最左邊進行查詢，並將其作為下一步的執行上下文，最終達到縮小上下文的目的，
$("#all.class2") 這句將先匹配所有#all元素，然後將其作為上下文在裏麵查找.class2
$("#all").find(".class2")而這裏則先匹配#all，再從中找匹配.class2;
兩種如果是使用sizzle的話，性能應該是差不多的。但是在支持querySelectorAll的瀏覽器中，可能前者沒有使用sizzle引擎，而直接調用原生的，就導致二者不一樣了。所有鄙人猜測就出現了題主的結果