Самый эффективный способ использования селекторов в jQuery?

Ответ 1

Старые версии IE выиграют от включения div, потому что они не поддерживают getElementsByClassName().

Из-за этого каждый элемент на странице должен быть выбран с помощью:

document.getElementsByTagName('*');

... и вручную проверили, есть ли у него класс active.

Если вы включили div, то он может немного сузить его, поскольку он может сделать:

document.getElementsByTagName('div');

... затем проверьте только те элементы.

Когда я говорю более старые версии, я имею в виду IE6 и IE7, поскольку IE8 + поддерживает querySelectorAll.

EDIT:

Поддержка браузера:

• getElementsByClassName: http://www.quirksmode.org/dom/w3c_core.html#t11
• querySelectorAll: http://www.quirksmode.org/dom/w3c_core.html#t13

Ответ 2

Это зависит. Если вы имеете в виду производительность. Я подготовил специальный тест для всех на JSPerf: тест выбора класса jquery. В моем браузере и компьютере (FF 3.6.13 и Core 2 Duo 1.6) div.active немного медленнее. Но он нашел переменным - похоже, у GC есть что-то здесь.

И после нескольких тестов кажется, что div.active:

• Скорость переменной на FF, иногда GC включает тест div.active, но в целом разница очень мала.
• Незначительная разница в Chrome и Safari
• Быстрее на IE9

Ответ 3

Мне нравится включать имя тега, если оно помогает самодокументировать код. Если я могу использовать

$("nav.primary") 

вместо

// this is the primary nav
$(".primary")

Я стараюсь это делать.

Ответ 4

Я думаю, что лучший способ получить некоторую скорость на больших страницах - это использовать find.

$(ваш-контейнер).find( "div.active" )

Так как ты всегда? знать, где вы должны выглядеть, вы можете создать свой собственный объем. Так что браузеру нужно искать только в этой области кода.

Кстати, вам не нужно заботиться о размере css, КОГДА-ЛИБО:) Используйте инструменты css minifing для минимизации css, когда сайт находится в рабочем режиме. Вы также можете настроить свой веб-сервер для автоматического gzip ваших файлов css перед отправкой пользователю. И если вы не измените имя файла css на каждой странице, кеш браузера до всего файла css.

Ответ 5

Селекторы CSS в jQuery были оптимизированы аналогично тому, как вы это делали для браузеров, см. http://css-tricks.com/efficiently-rendering-css/

Указание общего тега в любом месте, даже с идентификатором или классом, будет значительно медленнее, чем просто указывать только идентификатор или класс. См:

http://www.no-margin-for-errors.com/demos/how-to-optimize-jquery-selectors/

В приведенном выше примере используется jQuery 1.3. Поскольку jQuery 1.4 и введение механизма Sizzling-селектора, это менее важно из того, что я понимаю. См:

http://hungred.com/useful-information/jquery-optimization-tips-and-tricks/

Для себя я решил в CSS использовать все, что читает самое легкое, и я более конкретный, так как это только разобрано. Однако в jQuery я был более осторожен, так как эти селекторы могли работать тысячи раз в течение жизни страницы.