Производительность селектора jQuery с контекстом

Я читал эту статью Брэндона Аарона здесь , о том, как может помочь контекст jquery. Поэтому я подумал о том, чтобы сделать собственное испытание. Так вот что я сделал.

  1. Создал DIV с id = «context» и вложенным DIV с id = «держателем» в «#context», созданным ранее.

  2. Создал вложенные DIV глубины 18 и добавил к нему

    в результате чего 20 вложенных DIV

  3. Теперь я проверил время, затраченное на доступ к «#holder» с помощью следующих селекторов:
    а. $("#holder") // no context
    б. $("#holder", "#context") // with "#context" selector string
    с. $("#holder", $("#context")) // sending jquery object each time with selector "#context"
    д. $("#holder", $context) // where, var $context = $("#context"). Caching jquery obj
    Был отмечен каждый случай, когда доступ к X = 1000 раз, а также разность времени начала и окончания. Я нашел, что время занято:
    случай (а) был наименее последовательным 28-32 мсек [jquery-1.3.2]
    случай (b) + (c) имел наивысшие времена 60-65 мсек и 70-75 мс соответственно
    случай (d) имел 40-50 мсек с 1 или 2 шипами.

Является ли эта базовая проверка действительной? Вы можете играть с JS-кодом здесь, в JSBIN. [Дайте мне знать, если я смогу улучшить этот тест, как]
Если ДА, то как этот «контекст» действительно помогает?

#NOTE: также замените jquery-1.3.2 на jquery-1.4.2 в режиме редактирования jsbin, и вы будете удивлены, увидев, что цифры растут: P

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

Попробуйте протестировать следующим образом: http://jsbin.com/aciji4/4

вы действительно можете увидеть, что время становится лучше для контекста, когда вы увеличиваете количество элементов в DOM, например: http://jsbin.com/aciji4/6

Было бы разумно, что для использования контекста (в отличие от использования селектора) потребуется больше времени, так как внутри он использует метод .find (), поэтому, по сути, все, что вы действительно делаете, это

 $('#context').find('#holder'); 

В основном я рассматриваю это как более простой способ идентифицировать элементы в событиях и iteratorах, где изменяется контекст, потому что

 $('.holder', this) 

красивее, чем

 $(this).find('.holder') 

Селектор # ID зависит от исходного документа document.getElementById. Это будет быстро, несмотря ни на что.

Попробуйте селектор, например div.class [атрибут = значение] с контекстом и без него. Например *, вы можете выбрать ссылку «Связанные» вопросы справа с помощью этого селектора:

 // Selects anchor elements with href's beginning with /questions/ $('a[href^=/questions/]') 

Но быстрее ограничить количество элементов привязки, которые должен обработать движок селектора, оценивая относительно дорогое соответствие текста:

 $('a[href^=/questions/]', '.related') 

* И игнорируя, очевидно, более простой class .question-hyperlink на этих ссылках, ради обсуждения.

Для чего он стоит, $context = $("#context") все еще использует объект jQuery, который затем должен быть преобразован в объект DOM.

Если вы используете $context = $("#context")[0] вы обнаружите, что он работает так же быстро, как и первый тест.

Будьте осторожны, прежде чем вы собираетесь реорганизовать свой код. Как и в #NOTE, jQuery с 1.4 работает совсем по-другому. Последняя версия может содержать еще больше оптимизаций.

Я изменил код jsbin выше, чтобы иметь недавний jQuery, и добавил некоторые дополнительные случаи. Вы увидите, теперь только те три (2,3,6) случая получили штраф за производительность, который создает еще один объект jQuery за раунд. Отдых работает в то же время.

Вы можете найти измененную версию здесь: http://jsbin.com/aciji4/63/

Я взял код JSBin и поместил его в тест jsPerf

$ context.find («держатель») в два раза быстрее, чем его ближайший конкурент, $ («держатель», «$ контекст»), и это хорошо в десять раз быстрее, чем любой другой используемый селектор.

В заключение, кешируйте свои селекторы и используйте .find () для максимальной производительности

  • Создание m различных случайных чисел в диапазоне
  • Почему векторизация цикла не улучшает производительность
  • Микропроцессорность DateTime.DayOfWeek
  • Как изменить язык приложений iPhone во время выполнения?
  • Почему я должен использовать CDN от Google для jQuery?
  • Снижается ли производительность при выполнении циклов, чей счетчик uop не кратен ширине процессора?
  • Знать какие-либо инструменты анализа журналов сбора мусора Java?
  • Какая петля быстрее, пока или для?
  • Как передавать значения на страницах ASP.net без использования сеанса
  • Является ли использование double быстрее, чем float?
  • Как влияет динамическая переменная на производительность?
  • Давайте будем гением компьютера.