jQuery单select器vs .find（）

作为一个性能angular度来说，更好的做法是：

$(".div1 h2, .div1 h3") 

要么

 $(".div1").find("h2, h3") 

Answer 1

你的问题的答案是：是的。

不要担心性能的差异，除非你的代码很慢 。 如果是，则使用分析器来确定瓶颈。

从分析的angular度来看：

 $(".div1 h2, div1 h3") 

应该更快，因为jQuery将通过querySelectorAll （如果存在）pipe理它，并且本地代码运行得比非本地代码更快。 它也将节省一个额外的函数调用。

 $(".div1").find("h2, h3") 

如果您计划在.div1上链接一些其他function，则效果会更好：

 $(".div1").find("h2, h3").addClass('foo').end().show(); 

Answer 2

http://jsperf.com/selector-vs-find-again

select器更快

（注：组成随机的HTML只是因为它不仅仅是页面上的元素）

Answer 3

其实.find（）可以更快。

当尝试select多个元素时，select器似乎会更快地find; 然而，如果你使用$ .find，或者甚至caching后代，你可以看到它快得多： http : //jsperf.com/selector-vs-find-again/11

我也要求不同的performance不重要。 在这个智能手机的世界里，电池寿命是王道。

Answer 4

使用jsPerf 。

我为你创造了一个 。

Answer 5

我刚刚find这个答案，并希望在这里添加一些数字，可能有人觉得他们有帮助和好奇。 在我的情况下，我寻找最快的jQueryselect器的独特元素。 我不喜欢没有理由添加ID，所以我寻找方式来select没有ID的元素。

在我的小研究中，我使用了jQuery select器分析器 。 以下是我添加分析器的库代码后直接从Chrome控制台启动的代码：

 $.profile.start() // Lets for (i = 0; i < 10000; i++) { // ID with class vs. ID with find(class) $("#main-menu .top-bar"); $("#main-menu").find(".top-bar"); // Class only vs element with class $( ".top-bar" ); $( "nav.top-bar" ); // Class only vs class-in-class $( ".sticky" ); $( ".contain-to-grid.sticky" ); } $.profile.done() 

以下是结果：

 jQuery profiling started... Selector Count Total Avg+/-stddev #main-menu .top-bar 10000 183ms 0.01ms+/-0.13 nav.top-bar 10000 182ms 0.01ms+/-0.13 .contain-to-grid.sti... 10000 178ms 0.01ms+/-0.13 .top-bar 10000 116ms 0.01ms+/-0.10 .sticky 10000 115ms 0.01ms+/-0.10 #main-menu 10000 107ms 0.01ms+/-0.10 undefined 

最慢的select器位于该图表的顶部。 最快的是在底部。 令人惊讶的是，我select了ID即$('#main-menu')我发现了单个类select器，例如.sticky .top-bar和.sticky 。 干杯!