css3 - jQuery/CSS選擇器效率問題

問題描述

<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，這時是不是就會從左向右匹配了？

問題解答

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

可以考慮再做一個測試：

<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')

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