Как Вы знаете - в разработке объёмного JS-приложения где используется популярнейшая библиотека jQuery наступает момент когда остро встаёт проблема производительности. Все силы кидаются на амбразуру профайлера, каждый вызов скрупулёзно исследован, каждый функционально нагруженный кусок реализации обнюхан со всех сторон и выправлен. Но беда поступает не с той стороны, откуда её ждут 90% разработчиков. Селекторы
- Как много в этом слове.
Давайте разберёмся - как работает эта магия и почему поиск DOM-элементов может стать причиной падения производительности приложения.
Приведу простой пример:
Два приведенных селектора практически ничем не отличаются и вернут одинаковый набор элементов. Однако первый селектор вернёт результат работы querySelectorAll(), а второй - результат обычной фильтрации по элементам.
$("#my_form input")
$("#my_form input") Разбор селектора и поиск Если не удалось использовать querySelectorAll(), Sizzle будет пытаться использовать обычные функции браузера getElementById(), getElementsByName(), getElementsByTagName() и getElementByClass(). В большинстве случаев их хватает, но (sic!) в IE < 9 getElementByClassName() поломана и использование селектора по классу приведёт к полному перебору элементов в этом браузере.
В общем случае Sizzle разбирает селектор справа налево. Для иллюстрации данной особенности приведу несколько примеров:
$(".divs .my_class")
Сначала будут найдены элементы.my_class, а потом отфильтрованы только те, которые имеют.divs в родителях. Как мы видим - это довольно затратная операция, причём использование контекста не решает проблемы (о контексте мы поговорим ниже).
Как я уже сказал - в большинстве случаев Sizzle будет разбирать селектор справа налево, но не в случае использования элемента с ID:
$("#divs .my_class")
В таком случае селектор поведёт себя как ожидалось и сразу будет взят элемент #divs для использования в виде контекста.Контекст Второй параметр, передаваемый вместе с селектором в функцию $() называется контекстом. Он призван сузить круг поиска элементов. Однако - при разборе контекст пристыкуется к началу селектора, что выигрыша совершенно не даёт. Выигрышная комбинация использования контекста - валидный селектор для querySelectorAll(), так как данная функция может быть применена не только от имени document, но и от элемента. Тогда селектор с контекстом образно трансформируется следующую конструкцию:
$(".divs", document.getElementById("wrapper"));
document.getElementById("wrapper").querySelectorAll(".divs"); // при наличии возможности использовать querySelectorAll()
В данном примере, если невозможно использовать querySelectorAll(), Sizzle будет фильтровать элементы простым перебором.
Ещё одно замечание о контексте (речь не о селекторах) - если вторым параметром в селектор для функции.live() передать объект jQuery - событие будет ловиться на document(!), а если DOM-объект - то всплывать событие будет только до этого элемента. Такие тонкости я стараюсь не запоминать, а использую .delegate() .
$(".root > .child")
Как мы знаем - разбор селектора и поиск начнётся со всех.child элементов на странице (при условии, что querySelectorAll() недоступно). Такая операция достаточно затратна и мы можем трансформировать селектор так:
$(".child", $(".root")); // использование контекста не облегчит поиск
$(".root").find(".child"); // а зачем нам перебор всех элементов внутри.root?
$(".root").children(".child"); // самый правильный вариант
Однако, если есть необходимость использовать фильтры по каким-либо атрибутам (:visible, :eq и т.д.) и селектор выглядит так:
$(".some_images:visible")
то фильтр будет применён в последнюю очередь - т.е. мы опять отступаем от правила «справа налево».
- По возможности используйте правильные селекторы, подходящие под querySelectorAll()
- Заменяйте подчинённости внутри селекторов на подзапросы (.children(...) и т.д.)
- Уточняйте контекст селектора
- Фильтруйте как можно меньший готовый набор элементов
По мотивам мастер-класса
На этом уроке мы рассмотрим методы объекта document , которые предназначены для поиска узла или коллекции узлов во всём документе. А также методы объекта node (узла), которые выполняют аналогичные действия, но уже среди своих дочерних узлов.
Методы, предназначенные для поиска узла или коллекции узлов в деревеНа предыдущем уроке мы рассмотрели свойства, с помощью которых мы можем перемещаться по дереву и находить нужные нам узлы. Но, поиск узлов с помощью их свойств занятие очень трудное и не эффективное. Поэтому чтобы найти узлы в дереве, веб-разработчики обычно используют специально предназначенные для этого методы объекта document или узла (node).
Метод getElementById()Метод getElementById(elementID) возвращает элемент в документе, имеющий указанный идентификатор (id="elementID"), в виде объекта Node (узла). Если элемента с указанным идентификатором не существует, то данный метод возвращает значение null .
В соответствии стандартом у Вас в документе не может быть несколько элементов с одинаковым значением атрибута id , т.е. значение идентификатора должны быть уникальным в пределах одного документа. Тем не менее, если у Вас в документе существуют несколько элементов с указанным id , то метод getElementById() вернёт первый найденный элемент.
document.getElementById(elementID)
Данный метод имеет один обязательный параметр (elementID), представляющий собой строку, содержащую значение атрибута id элемента, который Вы хотите получить.
Например, изменить цвет текста элемента, имеющего id="nameArticie" .
Название статьи
- 1 пункт
- 2 пункт
- 3 пункт
Метод getElementsByClassName(className) возвращает все найденные элементы в документе (для document) или среди дочерних узлов (для node), имеющих указанное имя класса (class="className"), в виде объекта NodeList (коллекции узлов). Другими словами данный метод возвращает объект NodeList , представляющий собой коллекцию элементов (узлов), имеющих указанное в параметре этого метода имя класса.
Для получения количество найденных узлов Вы необходимо использовать свойство length объекта NodeList . А для того чтобы перебрать все узлы в коллекции можно воспользоваться следующим циклом:
Var elementsList = document.getElementsByClassName("list"); for (var i=0; i