В jQuery, который быстрее, селектор или эквивалентная функция, или это зависит? - PullRequest
Новая
       21

В jQuery, который быстрее, селектор или эквивалентная функция, или это зависит?

4 голосов
/ 14 января 2010

Я часто задавался вопросом об использовании селекторов по сравнению с эквивалентными функциями в jQuery. Под этим я подразумеваю операторы, которые содержат одни и те же компоненты, которые возвращают идентичные наборы результатов, но сконструированы по-разному.

Возьмите следующий пример: 

alert($("#FundManager1>option").length);
alert($("#FundManager1").find("option").length);

(Примечание: цель - два эквивалентных запроса. Если они не всегда одинаковы, я был бы признателен, если бы вы могли указать на это)

Итак, учитывая приведенный выше пример, есть ли реальная разница в скорости / производительности? Очевидно, что первый короче, поэтому приведет к меньшему количеству загруженных / загруженных байтов, но мне это сейчас не особо интересно.

1 Ответ

5 голосов
/ 14 января 2010

Я бы сказал, что первый быстрее, так как он анализирует только один селектор CSS и ищет только дочерние элементы, где второй должен анализировать два, плюс должен искать всех потомков.

Но я бы не стал беспокоиться о чем-то таком маленьком. Поскольку JavaScript действительно быстр в WebKit и Gecko, и все еще относительно быстр в IE, никто никогда не заметит разницу.

Из того, что я вижу, глядя на исходный код jQuery / Sizzle , оба фрагмента кода выполняют одно и то же внутри.

Сначала выполняется document.getElementById('FundManager1') ( Sizzle достаточно умен, чтобы понять, что означает #FundManager1), а затем поиск option выполняется с использованием этого в качестве контекста. Единственное различие между этими двумя частями кода заключается в использовании селектора >, в результате чего Sizzle ищет только прямые дочерние элементы контекста, а не всех потомков. Я предполагаю, что это быстрее, поскольку нужно исследовать только один уровень иерархии DOM.

Другое редактирование:

Приведенный выше текст относится только к браузерам, которые не поддерживают метод document.querySelectorAll(css_selector)! В браузерах, которые это делают (WebKit и Gecko, может быть Opera?), Этот метод используется вместо Sizzle , так что весь синтаксический анализ CSS выполняется селектором, а не фреймворком jQuery, конечно намного быстрее.

...