JQuery Find Performance

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

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.

7 голосов | спросил SergC 8 ThuEurope/Moscow2011-12-08T20:51:10+04:00Europe/Moscow12bEurope/MoscowThu, 08 Dec 2011 20:51:10 +0400 2011, 20:51:10

4 ответа


0

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

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

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

ответил Laurent le Beau-Martin 8 ThuEurope/Moscow2011-12-08T21:01:05+04:00Europe/Moscow12bEurope/MoscowThu, 08 Dec 2011 21:01:05 +0400 2011, 21:01:05
0

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

Результаты сравнения двух алгоритмов

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

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

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

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

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

var $colSelect = $($('#stuff').find('.things'));
ответил scottheckel 8 ThuEurope/Moscow2011-12-08T20:56:15+04:00Europe/Moscow12bEurope/MoscowThu, 08 Dec 2011 20:56:15 +0400 2011, 20:56:15
0

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

ответил Nakul 8 ThuEurope/Moscow2011-12-08T20:53:39+04:00Europe/Moscow12bEurope/MoscowThu, 08 Dec 2011 20:53:39 +0400 2011, 20:53:39
0

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

$('#stuff .things')
    .find('img').addClass("foo").end() // .end() returns to '#stuff .things'
    .find('input').addClass("foo").end()
    .find('select').addClass("foo");
ответил Emre Erkan 8 ThuEurope/Moscow2011-12-08T21:11:28+04:00Europe/Moscow12bEurope/MoscowThu, 08 Dec 2011 21:11:28 +0400 2011, 21:11:28

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132