JQuery single selector vs .find()

Ответ 1

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

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

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

$(".div1 h2, div1 h3")

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

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

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

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

Ответ 2

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

быстрее

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

Ответ 3

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

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

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

Ответ 4

Используйте jsPerf.

Я создал его для вас.

Ответ 5

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

В моем небольшом исследовании я использовал awesome селекторный профайлер для 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

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