jQuery в деталях. Оптимизация поиска.

В этой части поговорим о там как можно оптимизировать выборки по элементам (поиск) через селекторы и фильтры, которые мы рассматривали ранее селекторы, фильтры.

Данный урок будет полезен не только новичкам, но и опытным разработчикам, чтобы закрепить свои знания по jQuery.

Прежде давайте разберемся, для чего нужна оптимизация кода.
Говоря простыми словами, оптимизируя код мы получаем быстро работающий интерфейс приложения, минимально загружающий процессор при большом количестве элементов на странице. Оптимизированный код дает визуально "гладкую" работу пользовательского интерфейса без рывков и провалов.

Логично предположить, что если jQuery - это надстройка на javascript, состоящая из множества дополнительных методов, то это будет сказываться на производительности в худшую сторону. Поэтому код на чистом javascript будет всегда работать быстрее. Следовательно, всегда, когда это возможно, особенно если web-страница будет содержать большое количество элементов, желательно использовать нативные функции javascript, либо наиболее легкие методы jQuery, о которых мы поговорим прямо сейчас.

При написании кода на jQuery, следует всегда помнить, что каждый раз, запрашивая элементы через селекторы/фильтры, происходит инициализация нового поиска. То есть в памяти не сохраняются (не кешируются) результаты предыдущих выборок, даже если они полностью идентичны текущей.

Значит их необходимо сохранять самим...

1. Сохраняйте результаты выборок, если планируете их использовать более одного раза.

Например возьмем код:

$(".select").show();
$(".select").change(function(){ /* код функции */ });

И оптимизируем:

var select = $(".select");
select.show();
select.change(function(){ /* код функции  */ });
/* далее в коде много раз используем переменную **select** */

2. Используйте цепочки вызовов

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

Возьмем тот же пример:

$(".select").show();
$(".select").change(function(){ /* код функции */ });

Запишем через цепочку:

$(".select").show()
            .change(function(){ /* код функции */ });

3. Применяйте "context".

Например: в методе для поиска по селектору

$("div .button");

можно задать второй параметр

$(".button", "div"); //  будет работать быстрее
$("div").find(".button"); // так же быстро отрабатывает

4. Разбивайте сложные запросы на составные части

По умолчанию jQuery старается "скормить" запрос к нативному js методу document.querySelectorAll(), но иногда он "спотыкается", к примеру если браузер пользователя не поддерживает какую-то часть.
Тогда в действие вступает "тяжелая артиллерия" - Sizzle - библиотека, входящая в состав jQuery. И запрос уже разбирается на составные части в недрах Sizzle, что займет гораздо больше времени.

К примеру есть код:

$(".menu .submenu li.active a:hidden");

Который можно разбить на несколько частей:

$(".menu .submenu").find("li.active").find("a:hidden"); // будет работать быстрее

5. Используйте нативные функции javascript в местах кода критичных к производительности.

Чистый Javascript выручит в наиболее критичных местах и заметно ускорит выполнение скрипта, но код будет не такой лаконичный как на jQuery.

6. Старайтесь обращаться к элементу по его id - это обеспечит наиболее быстрый доступ к элементу

Таким образом jQuery будет напрямую запускать js-метод document.getElementById(), чтобы не делать лишнюю работу.

Например код:

$("#link");

Будет эквивалентен коду на js:

document.getElementById("link");

Если же вызвать #link через родителя, то это будет работать на порядок медленнее:

$("div#link");

Это были основные приемы оптимизации которыми пользуются все профессионалы по фронтенду на jQuery. Надеюсь многим они будут полезны.

---

Всегда рад Вашему вниманию, голосуйте и комментируйте.
Подписывайтесь, дальше здесь будет очень интересно.

---