問(wèn)題描述

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

通過(guò)實(shí)驗(yàn)發(fā)現(xiàn)$('#all').find('.class2')要比$('#all .class2')性能好，為什么呢？jQuery和CSS都用的是Sizzle選擇器引擎，他的解析方式是從右向左。也有說(shuō)如果最左邊指定了id，就會(huì)先取id，這時(shí)是不是就會(huì)從左向右匹配了？

問(wèn)題解答

沒(méi)看過(guò)具體實(shí)現(xiàn)，不過(guò)，前者顯然是從左到右匹配，後者如果也是，性能應(yīng)該一樣。既然前者性能更好，那麼顯然後者該是從右向左的了。

可以考慮再做一個(gè)測(cè)試：

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

測(cè)試 $('#all').find('p.class2') 和 $('#all p.class2')

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