JQuery ядро включает в себя элемент DOM выбор двигателя с именем шипение, которое пересекает DOM. Текущая версия Sizzle - v2.3.3. Sizzle повлиял на архитектуру других фреймворков Javascript, таких как yui v3 и dojo, и мотивировал создание стандартных селекторов-api.

Полный список поддерживаемых селекторов доступен в документации API jQuery: Селекторы. Реализовано большинство селекторов CSS, а также набор настраиваемых.

Примеры допустимых селекторов включают $(".className"), $("#idName"), а также $("div.className:not('#idName')).

Оптимизация jQuery

Кеш

var that = $(this);
that.find("div");

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

Используйте селекторы на основе идентификаторов

//slow
$( ".redbox" );

//better
$( "#container div.redbox" );

// Fast!
$( "#container" ).find( "div.redbox" );

.find() работает быстрее, потому что первый выбор обрабатывается без прохождения механизма выбора Sizzle - выбор только по идентификатору обрабатывается с помощью document.getElementById(), что очень быстро, поскольку оно встроено в браузер.

Специфика

// slow
$( "div.data .redrow" );

// Fast!
$( ".data td.redrow" );

Будьте конкретны в правой части селектора и менее конкретно в левой. По возможности используйте tag.class в самом правом селекторе и просто тег или просто.class слева.

"Более плоский" DOM также помогает улучшить производительность селектора, так как в механизме селектора меньше слоев, которые нужно перемещать при поиске элемента.

Универсальный селектор

// slow
$( ".robot > *" );
// better
$( ".robot" ).children();

// Implied universal selection. (slow!)
$( ".redform :radio" );
// Same thing, explicit now. (better)
$( ".redform *:radio" );
// Fast!
$( ".redform input:radio" );

Цепочка

// slow
$( "#box" ).hide();
$( "#box" ).show();

// fast
var box = $( "#box" );
box.hide().show();

Вместо того, чтобы выбирать одно и то же несколько раз для нескольких методов, просто используйте один селектор со всеми необходимыми вам методами. Почти каждый метод jQuery возвращает использованный объект. Это сводит к минимуму поиск и доступ к переменным.

Прямые спусковые устройства

// slow
$('body h1')
$('body').find('h1')

// faster
$('body > h1')
$('body').children('h1')

По возможности используйте операторы прямого потомка.

HTML5

Если можете, используйте HTML5. HTML5 создает новые элементы макета страницы, такие как раздел, верхний колонтитул, нижний колонтитул, статья и т. Д. Наличие более конкретных тегов макета означает, что меньше элементов, совместно использующих данное имя тега, переводится в лучшие селекторы.

Связанные теги

• jquery