为了性能,我应该链接选择器调用还是让jQuery完成工作?

时间:2013-04-04 19:25:35

标签: jquery

就浏览器性能而言,我应该链接选择器调用吗? jQuery是否会进行完整的文档搜索?

例如$('.my_thing') and $('#outer_div .my_thing')

之间的差异

5 个答案:

答案 0 :(得分:2)

我建议您阅读24ways上的这篇文章:Your jQuery: Now With 67% Less Suck.,尤其是选择器优化部分。

正如您将在现代浏览器中看到的那样,类选择器非常快,但不是在< IE8。

我建议不要使用$('#outer_div .my_thing'),更好$('#outer_div').find('.my_thing')

答案 1 :(得分:0)

完全取决于选择器。

在您的情况下,假设您没有.my_thing之外的#outer_div元素,两个选择器都会非常快,因为它们将使用基础getElementsByTagName

你在这里比较两个非常快的选择器,所以区别并不重要。

答案 2 :(得分:0)

常识说第一个例子,因为第二个例子需要额外的步骤来找到第一个元素,然后遍历它的DOM分支,直到找到第二个元素。

想象一下,你正在搜索DOM的第一个元素,你实际上可以传递第二个元素(你正在寻找),因为循环的终端条件是找到第一个元素。

与大多数性能调整一样,改进将取决于浏览器。


有关: Fastest selector method in jquery and CSS - ID or not?

答案 3 :(得分:0)

以下是关于该主题的一些有用的文章:

http://blog.bigbinary.com/2010/02/15/how-jquery-selects-elements-using-sizzle.html http://dumitruglavan.com/jquery-performance-tips-cheat-sheet/ http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-think-right-to-left-with-jquery/

总而言之,通过引入Sizzle,上述查询应该提供大致相同的性能数字。如果您使用旧版本,第一种方法应该更快。

答案 4 :(得分:0)

另一个:

'#id'选择器最快,查找是浏览器原生方法

$('#outer_div').find('.my_thing'); 
// or shorthand 
$('.my_thing', '#outer_div');