эффективнее использовать $('.active') или $('div.active')? Я всегда избегал включать "div", потому что это дополнительный текст в файле javascript, который я не хочу, чтобы пользователь загружался.
Самый эффективный способ использования селекторов в 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 я был более осторожен, так как эти селекторы могли работать тысячи раз в течение жизни страницы.