jQuery: Добавление контекста к селектору намного быстрее, чем уточнение вашего селектора?

Question

Я только что заметил, что добавление контекста к селектору намного быстрее, чем уточнение вашего селектора.

$('li',$('#bar')).append('bla');

В два раза быстрее, чем:

$('#bar li').append('bla');

Это вообще правда?

Answer 1

добавление контекста в селектор быстрее, чем уточнение вашего селектора

Это верно в общем случае. Что касается ваших конкретных примеров, однако это не обязательно верно для jQuery <= 1.2.6. </p>

До версии jQuery 1.2.6 включительно механизм выбора работал «сверху вниз» (или «слева направо»). Это означает, что оба ваших примера будут работать примерно так:

var root = document.getElementById('bar');
return root.getElementsByTagName('li');

jQuery 1.3.x (т. Е. Sizzle , в который встраивается jQuery) представил подход «1013» «снизу вверх» (или «справа налево») для запроса DOM. Так что $('#bar li') теперь становится (примерно):

var results = [];
var elements = document.getElementsByTagName('li');
for(var i=0; i < elements.length; i++) {
    var element = elements[i];
    var parent = element.parentNode;
    while(parent) {
        if(parent.id == 'bar') {
            results.push(element)
            break;
        }
        parent = parent.parentNode;
    }
}
return results

У обоих подходов есть свои преимущества и недостатки. Вы нашли один из минусов.

Редактировать : только что из этого обсуждения только что выяснилось, что ствол Sizzle теперь делает специальное исключение селекторов, где #id является первым. Он использует это как корневой контекст, немного ускоряя процесс. Это должно уменьшить, если не устранить разницу в скорости, которую вы видите.