Как видно из названия, jQuery фокусируется на запросах. Ядро библиотеки позволяет находить элементы DOM с использованием синтаксиса селектора CSS и запускать методы для этой коллекции.
jQuery использует собственные методы API браузера для получения коллекций DOM. Новые браузеры поддерживают getElementsByClassName, querySelector и querySelectorAll, которые анализируют синтаксис CSS. Однако старые браузеры предлагают только getElementById и getElementByTagName. В худшем случае движок Sizzle jQuery должен анализировать строку селектора и искать совпадающие элементы.
Вот пять советов, которые могут помочь вам оптимизировать ваши селекторы jQuery …
1. Используйте ID, если это возможно
Атрибуты HTML ID уникальны на каждой странице, и даже старые браузеры могут очень быстро найти один элемент:
$("#myelement");
2. Избегайте выбора только по классу
Следующий селектор классов будет работать быстро в современных браузерах:
$(".myclass");
К сожалению, в старых браузерах, таких как IE6 / 7 и Firefox 2, jQuery должен проверять каждый элемент на странице, чтобы определить, был ли применен «myclass».
Селектор будет более эффективным, если мы укажем его именем тега, например
$("div.myclass");
jQuery теперь может ограничивать поиск только элементами DIV.
3. Сохраняйте это простым!
Избегайте слишком сложных селекторов. Если у вас нет невероятно сложного HTML-документа, редко вам понадобится больше двух или трех классификаторов.
Рассмотрим следующий сложный селектор:
$("body #page:first-child article.main p#intro em");
p # intro должен быть уникальным, чтобы можно было упростить селектор:
$("p#intro em");
4. Увеличьте специфичность слева направо
Небольшое знание движка селектора jQuery полезно. Сначала он работает с последнего селектора, поэтому в старых браузерах такой запрос:
$("p#intro em");
загружает каждый элемент em в массив. Затем он работает с родителями каждого узла и отклоняет те, где p # intro не может быть найдено. Запрос будет особенно неэффективным, если у вас есть сотни тегов em
В зависимости от вашего документа, запрос может быть оптимизирован путем извлечения наиболее подходящего селектора. Затем его можно использовать в качестве отправной точки для дочерних селекторов, например
$("em", $("p#intro")); // or
$("p#intro").find("em");
5. Избегайте повторения селектора
Редко необходимо использовать один и тот же селектор дважды. Следующий код выбирает каждый тег p
$("p").css("color", "blue");
$("p").css("font-size", "1.2em");
$("p").text("Text changed!");
Помните, что jQuery предлагает цепочки; несколько методов могут быть применены к одной и той же коллекции. Следовательно, один и тот же код может быть переписан, поэтому он применяется к одному селектору:
$("p").css({ "color": "blue", "font-size": "1.2em"}).text("Text changed!");
Вы должны кэшировать объект jQuery в переменной, если вам нужно использовать один и тот же набор элементов несколько раз, например
var $p = $("p");
$p.css("color", "blue");
$p.text("Text changed!");
В отличие от стандартных коллекций DOM, коллекции jQuery не являются живыми, и объект не обновляется при добавлении или удалении тегов абзаца из документа. Вы можете закодировать это ограничение, создав коллекцию DOM и передав ее в функцию jQuery, когда это необходимо, например,
var p = document.getElementByTagName("p");
$(p).css("color", "blue");
// update the DOM
$(p).text("Text changed!");
У вас есть еще советы по оптимизации селектора jQuery?