jQuery single selector vs. find()

Które lepiej wykorzystać jako perspektywę wydajności: 

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

Lub 

$(".div1").find("h2, h3")
Author: Cristian Sanchez, 2011-06-03
Source

5 answers

Odpowiedź na twoje pytanie brzmi: tak.

Nie martw się o różnicę wydajności, chyba że Twój kod jest powolny . Jeśli Tak, użyj profilera, aby określić wąskie gardła.

Z punktu widzenia analizy: 

$(".div1 h2, div1 h3")

Powinien być szybszy, ponieważ jQuery przepuści go przez querySelectorAll (jeśli istnieje), a kod natywny będzie działał szybciej niż kod nie natywny. Pozwoli to również zaoszczędzić na dodatkowym wywołaniu funkcji.

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

Jest lepiej, jeśli planujesz połączyć kilka innych funkcji na .div1:

$(".div1").find("h2, h3").addClass('foo').end().show();
 32
Author: zzzzBov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-03 17:14:22

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

Selektor jest szybszy

(uwaga: stworzył losowy html, żeby nie chodziło tylko o te elementy na stronie)

 46
Author: James Montagne,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-03 17:06:26

Właściwie, .find() może być szybsze.

Selektory wydają się być szybsze niż find podczas próby wybrania wielu elementów; jednak, jeśli używasz $.znaleźć, a nawet buforować potomka, widać, że jest znacznie szybszy: http://jsperf.com/selector-vs-find-again/11

Błagam też, żeby nie było to ważne. W tym świecie smartfonów żywotność baterii jest królem.

 15
Author: Drath,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-01-03 15:55:17
 6
Author: Thai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-06-03 17:06:43

Właśnie znalazłem tę odpowiedź i chcę dodać kilka liczb tutaj, może ktoś uzna je za pomocne i ciekawe. W moim przypadku Szukałem najszybszego selektora jQuery dla unikalnego elementu. Nie lubię dodawać ID bez powodu, więc szukałem sposobu, aby wybrać elementy bez ID.

W moich małych badaniach użyłem awesomeselector profiler do jQuery. A oto kod, który odpaliłem bezpośrednio z konsoli Chrome po dodaniu kodu biblioteki profilera: 

$.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()

Oto wyniki: 

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

najwolniejsze selektory znajdują się na szczycie tego wykresu. Najszybsi są na dole. O dziwo jak dla mnie zaraz po selektorze po ID czyli $('#main-menu') znalazłem selektor pojedynczych klas np. .top-bar i .sticky. Zdrowie!

 1
Author: sashaegorov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-25 21:11:05