JQuery Find Performance

Question

Я обнаружил, что это:

var $colSelect = $('#stuff').find('.things');
$($colSelect).find('img, input, select').addClass("foo");

медленнее, чем это:

var $colSelect = $('#stuff').find('.things');
$($colSelect).find('img').addClass("foo");                       
$($colSelect).find('input').addClass("foo");                 
$($colSelect).find('select').addClass("foo");

Может кто-нибудь помочь мне понять, почему это так?В частности, я заметил увеличение производительности в IE8.

Answer 1

Я думаю, что для первого селектора jQuery должен проанализировать селектор, вызвать для каждого из них JavaScript getElementsByTagName и объединить результаты (возможно, даже упорядочив их в порядке их расположения в DOM).

Во втором случае прямые вызовы JavaScript getElementsByTagName, без каких-либо других операций.

На этой странице сравниваются выступления: http://jsperf.com/jquery-selector-performance-problems

Answer 2

Обновление 2: изменено, чтобы отразить сетку, как характер того, что у вас есть. Вот мои выводы с помощью jQuery 1.7.1 (один - ваш верхний код, два - ваш нижний код). Я взял только 5 самых медленных вещей, потому что все остальное не имело значения.

Как вы можете видеть, причина того, что один, вероятно, медленнее, чем другой, из-за функции sortOrder (минимизированной как U) и / или Array.sort. Оба из них даже не появляются в два. Несомненно, проблема в том, что приходится возвращаться и сортировать результаты. makeArray (уменьшенный как s выше), похоже, занимает меньше времени в 1, но это не компенсирует необходимость сортировки.

Обновление: Я создал jsFiddle, чтобы поиграть с ним , и я не вижу заметной разницы в IE8 между этими двумя методами. Возможно, нужно больше контекста для того, как выглядит эта страница / какие стили применяются. Это может быть связано с рендерингом браузера, из-за которого ваш код работает по-другому.

IE8 имеет встроенный профилировщик.

1. Перейти к инструментам разработчика (F12)
2. Перейдите на вкладку «Профиль»
3. Нажмите кнопку «Пуск»
4. Работает ли JavaScript так, как нужно
5. Нажмите Стоп и проанализируйте результаты. Ищите вещи, которые являются медленными. Переработать их.
6. Повторите

Советы по улучшению вашего JavaScript. Старайтесь не вызывать $ ($ colSelect) все время. Сохраните его в переменную, например, так.

var $colSelect = $($('#stuff').find('.things'));

Answer 3

Как насчет этого?

$('#stuff .things')
    .find('img').addClass("foo").end() // .end() returns to '#stuff .things'
    .find('input').addClass("foo").end()
    .find('select').addClass("foo");

Answer 4

во втором случае поддерево DOM в $ colSelect будет проходить трижды. Вот почему это будет медленно.