Если ваши селекторы не настолько смехотворно плохи, jQuery проделает фантастическую работу по их оптимизации, и, в общем, вам не нужно слишком о них беспокоиться. Однако, наряду со сказанным, вы можете позволить себе некоторое количество усовершенствований, слегка улучшающих производительность вашего скрипта.
Одним из таких решений является использование, когда это возможно, метода find(). Основная идея – это отход от принуждения jQuery использовать движок Sizzle, когда это не является необходимым. Конечно, будут моменты, когда это невозможно — и это нормально; но, если вам не нужны дополнительные издержки, не нарывайтесь на них.
// хорошо для современных браузеров, хотя Sizzle не начинает "запускаться"
$('#someDiv p.someClass').hide();
// хорошо для всех браузеров, а Sizzle не включает зажигание.
$('#someDiv').find('p.someClass').hide();
У последних современных браузеров имеется поддержка QuerySelectorAll,что позволяет передавать селекторы, аналогичные CSS, не нуждаясь в jQuery. Сам по себе jQuery с тем же успехом использует эту функцию, когда это возможно.
Однако старые браузеры, а именно IE6/IE7, естественно, не обеспечивают поддержку этой функции. Значит, такие более сложные селекторы запускают движок jQuery Sizzle – несомненно замечательный, но требующий больших ресурсов.
Sizzle – блестящая реализация, которую я, возможно, никогда не пойму. Тем не менее, если вкратце, он сначала берет селектор и превращает его в "массив", состоящий из каждого компонента вашего селектора.
// смутное представление о том, как это работает
['#someDiv, 'p'];
Затем справа налево начинает расшифровывать каждый элемент стандартными регулярными выражениями. Кроме всего прочего, еще это означает, что крайняя справа часть вашего селектора должна быть как можно более конкретной — например, id или название тэга.
Итак, когда это возможно:
Старайтесь сделать свои селекторы простыми
Используйте метод find(). Таким образом, вместо использования Sizzle, можно продолжить применять встроенные функции браузера.
Как можно лучше оптимизируйте правую часть селектора при использовании Sizzle.
Контекст вместо этого?
Также можно использовать в своих селекторах текущий контекст, например:
$('.someElements', '#someContainer').hide();
Этот код предписывает jQuery упаковать в коллекцию множество всех элементов класса someElements — являющихся дочерними элементами someContainer — внутри jQuery. Использование контекстов – полезный способ ограничения обхода узлов DOM, поскольку "за кулисами" jQuery в этом случае использует метод find.
$('#someContainer')
.find('.someElements')
.hide();
Подтверждение:
// ДЕСКРИПТОР: $(expr, context)
// (который эквивалентен: $(context).find(expr)
} else {
return jQuery( context ).find( selector );
}