JQuery один селектор против .find ()

Question

Что лучше использовать с точки зрения производительности:

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

или

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

Answer 1

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

селектор быстрее

(ПРИМЕЧАНИЕ: составил случайный HTML только для того, чтобы это были не только те элементы на странице)

Answer 2

Ответ на ваш вопрос: да.

Не беспокойтесь о разнице в производительности, если ваш код работает медленно . Если это так, используйте профилировщик для определения узких мест.

С точки зрения анализа:

$(".div1 h2, div1 h3")

должно быть быстрее, поскольку jQuery направит его через querySelectorAll (если он существует), а собственный код будет работать быстрее, чем не нативный. Это также сэкономит на дополнительном вызове функции.

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

лучше, если вы планируете связать некоторые другие функции на .div1:

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

Answer 3

На самом деле .find () МОЖЕТ быть быстрее.

Селекторы быстрее обнаруживаются при попытке выбрать несколько элементов; однако, если вы используете $ .find или даже кэшируете потомка, вы увидите, что это намного быстрее: http://jsperf.com/selector-vs-find-again/11

Я также позволю себе не согласиться с тем, что производительность не важна. В этом мире смартфонов время автономной работы - главное.

Answer 4

Использование jsPerf .

Я создал один для вас .

Answer 5

Я только что нашел этот ответ и хочу добавить несколько цифр здесь, может быть, кто-то найдет их полезными и любопытными. В моем случае я искал самый быстрый селектор jQuery для уникального элемента. Я не люблю добавлять идентификаторы без причины, поэтому я искал способ выбрать элементы без идентификатора.

В своем небольшом исследовании я использовал замечательный селекторный профилировщик для jQuery. И вот код, который я запустил прямо из консоли 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

Самые медленные селекторы находятся в верхней части этого графика. Самые быстрые находятся внизу. Удивительно для меня сразу после селектора по идентификатору, т.е. $('#main-menu') Я нашел один селектор класса, например .top-bar и .sticky. Ура!