我经常想知道在jQuery中使用选择器和等效函数。我的意思是包含返回相同结果集的相同组件的语句,但构造方式不同。
采用以下示例:
alert($("#FundManager1>option").length);
alert($("#FundManager1").find("option").length);
(注意:目的是针对两个等效的查询 - 如果这些问题并不总是相同的话,我将不胜感激,如果你能指出这一点)
所以,鉴于上面的例子,速度/性能有什么真正的区别吗?显然,前者更短,因此上传/下载的字节更少,但我现在对此并不感兴趣。
答案 0 :(得分:5)
我会说第一个更快,因为它只解析一个CSS选择器而只查找子节点,其中第二个必须解析两个,并且必须查找所有后代。
但我不会为这么小的东西而烦恼。由于JavaScript在WebKit和Gecko中速度非常快,而且在IE中相对较快,没有人会注意到它们之间的区别。
通过查看jQuery / Sizzle源我可以看到,两段代码在内部都做同样的事情。
执行第一个document.getElementById('FundManager1')
(Sizzle足够聪明,知道#FundManager1
的意思),然后使用它作为上下文完成对option
的搜索。两段代码之间的唯一区别是使用>
选择器,导致Sizzle仅搜索上下文的直接子节点,而不是所有后代。我认为这更快,因为只需要探索一个级别的DOM层次结构。
另一个编辑:
上述文字仅适用于不支持document.querySelectorAll(css_selector)
方法的浏览器!在浏览器中(WebKit和Gecko,也许是Opera?),使用此方法代替Sizzle,因此所有CSS选择器解析都是由浏览器本身完成的,而不是jQuery框架,我相信它是快得多。