Оптимизируем выборки

Ну перво-наперво вам следует запомнить, что

результаты поиска не кэшируются, каждый раз, запрашивая элементы по селектору, вы инициируете поиск элементов снова и снова

Взглянув на алгоритм работы Sizzle, сходу напрашиваются несколько советов об оптимизации по работе с выборками:

1. Сохранять результаты поиска (исходя из постулата выше):

// было $("a.button").addClass("active");

/* ... .*/ $("a.button").click(function(){ /* ... .*/ });

// стало

var $button = $("a.button"); $button.addClass("active");

/* ... .*/ $button.click(function(){ /* ... .*/ });

2. Или использовать цепочки вызовов (что по сути аналогично первому правилу):

// было $("a.button").addClass("active");

$("a.button").click(function(){ /* ... .*/ });

// стало $("a.button").addClass("active")

.click(function(){ /* ... .*/ });

3. Использовать context (это такой второй параметр при выборе по селектору):

// было

$(".content a.button"); // стало

$("a.button", ".content"); $(".content").find("a.button",); // чуток быстрее

35

Примеры оптимизаций

Выбор по идентификатору элемента – самый быстрый из возможных, старайтесь использовать оный:

// внутри одна регулярочка + getElementById() $("#content")

// а вот так ещё быстрее $(document.getElementById("content"))

//но экономия незначительна

//а удобство использования стремится к нулю

Селектор «div#content» работает на порядок медленнее, нежели поиск лишь по идентификатору – «#content», но и он имеет право на существование в случае, если ваш скрипт используется на нескольких страницах, а логика требует лишь обрабатывать поведение для элемента «div». Данный селектор можно представить в двух вариантах:

// getElementById() + фильтрация $("#content").filter("div");

// оставляем как есть и надеемся на QuerySelectorAll() $("div#content");

Врезультате тестирования получаем следующий расклад:

—пример с использованием filter() работает быстрее в браузерах Chrome, Firefox и IE9.0+

—оба способа работают наравне в браузерах IE8.0 и мобильном Safari

—второй пример работает в два раза быстрее в последних версиях Opera

Выводы делаем сами.

37