您的位置:首页技术文章
文章详情页

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

【字号: 日期:2023-08-05 16:19:33浏览:34作者:猪猪

问题描述

<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,这时是不是就会从左向右匹配了?

问题解答

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

回答2:

Sizzle选择器引擎的主要工作就是向上兼容querySelectorAll这个API,假如所有浏览器都支持该API,那Sizzle就没有存在的必要性了。sizzle选择器一般是从右向左匹配(在不存在位置伪类的时候),Sizzle也不完全是采用从右到左,如果选择器表达式的最左边存在#id选择器,就会首先对最左边进行查询,并将其作为下一步的执行上下文,最终达到缩小上下文的目的, $('#all.class2') 这句将先匹配所有#all元素,然后将其作为上下文在里面查找.class2 $('#all').find('.class2')而这里则先匹配#all,再从中找匹配.class2;两种如果是使用sizzle的话,性能应该是差不多的。但是在支持querySelectorAll的浏览器中,可能前者没有使用sizzle引擎,而直接调用原生的,就导致二者不一样了。所有鄙人猜测就出现了题主的结果

标签: CSS
相关文章: