Улучшенный синтаксис производительности JQuery?

Question

Есть ли какая-либо разница в производительности для синтаксиса 2 ниже?

1. $(“span.foo”)
2. $(“.foo”)

Кто-то сказал мне, что первый один будет просто искать span, чей класс foo в то время как второй будет искать среди всех элементов.

Answer 1

Если вы ищете проблему, связанную с производительностью, всегда лучше тестировать различные решения, чтобы увидеть, какой из них лучше.

Оба они могут иметь разные базы результатов разметки.

Но если у вас есть только span с классом foo, то второй будет быстрее.
_{Причина может заключаться в первом случае, когда он сначала загрузит весь диапазон в документе, а затем отфильтрует их классом foo, а второй - вы наследуете getElementsByClassname для извлечения элементов.}

Посмотрите на этот jsperf benchmark

Answer 2

Кто никогда не говорил вам, что правильно.

Похоже, что это примерно полсекунды (Firefox, Chrome меньше этого) при выборе на двух элементах более 100 000 итераций.

http://jsfiddle.net/83qcy/

var start, end, i; 

start = new Date(); 
for(i = 0; i < 100000; i++){ 
    $("span.foo"); 
} 
end = new Date(); 
$("span.foo").html(end - start); 

start = new Date(); 
for(i = 0; i < 100000; i++){ 
    $(".foo"); 
} 
end = new Date(); 
$("div.foo").html(end - start); 

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

Кроме того, вы можете выбрать элементы, которые вы не хотите, если вы хотите применить только функции для пролетов с классом «Foo»