Оптимизация Javascript. Mootools и jQuery
Итак, давно кануло в лету то время, когда при создании сайтов Javascript использовали только для проверки форм. В настоящее время Javascript позволяет создавать сложные визуальные эффекты и приближает страницы сайтов по своему удобству к настольным приложениям.
В последнее время большую популярность набирают js framework и. Казалось бы, здорово в несколько строк уместить то, для создания чего раньше нужно было написать с десяток функций, при этом не обращая внимание на реализацию тех или иных технологий в разных браузерах.
Но нагрузка от таких «приложений» всё возрастает и возрастает. А если Ваш сайт начнёт «тормозить», то вряд ли посетитель ещё раз вернётся к Вам. Давайте рассмотрим несколько аспектов и подходов, которые в дальнейшем нам помогут «ускорить» исполнение наших скриптов, снизят нагрузку на клиентский браузер пользователя и эффективно скажутся на быстродействии сайта.
- Используйте, где это возможно, ID элементов вместо классов для получения массива элементов.Рассмотрим ситуацию: дело в том, что поиск элемента по классу выполняется приблизительно так: перебираются все элементы, у которых установлен класс, при этом класс элемента обычно представляет набор разных значений, разделённый пробелами. То есть, чтобы найти элемент по определённому классу, нам нужно полностью обойти дерево документа, получить каждый класс элемента, и протестировать класс с помощью регулярных выражений на наличие заданного значения. Запрос же по ай-ди передаётся напрямую функции getElementById() и элемент извлекается сразу.Примеры:
HTML:
<div id="paren-container"> <div class="first second fird" id="first"></div> <div class="first second fird" id="second"></div> <div class="first second fird" id="fird"></div> </div>
Mootools: Быстрее $$(«#first,#second,#fird»), чем $$(«.first»)
JQuery: аналогично.
- Если использование классов избежать невозможно, для поиска и операций над нужными элементами, используйте контекст родительского элемента для поиска. Задавайте для родительского элемента id, и выполняйте поиск нужных элементов в его контексте. Это сократит время поиска и избавит от перебора всего дерева документа.Примечание автора:
- Функции для поиска элементов в контексте mootools:(element)$(parent_selector).getElement(children), (elements)$(parent_selector).getElements(children)Находит все элементы в контексте элементе parent_selector, переданные селектором children, в первом случае (element)$(parent_selector).getElement(children) возвращает первый встречающийся элемент, во втором случае (elements)$(parent_selector).getElements(children)возвращает массив всех найденных элементов.
- Функции для поиска элементов в контексте JQuery:jQuery(children, parent_selector),$( children, parent_selector) — находит все элементы в контексте элементе parent_selector, переданные селектором children, возвращает коллекцию элементов длинной length, обратиться к каждому из которых можно с помощью функции get(номер в массиве) или с помощью явного индекса массива.
Пример:
<body> <div class="c4 f1…"> ... <div class="c3 fn …"> <div id="parent-container"> <div class="c1 f1…"> ... <div class="c1 fn …"> ... </div> ... </div> </div> ... </div> ... </div> </body>Извлекаем все элементы с классом c1:
Mootools: $(«parent-container»).getElements(«.c1»); гораздо быстрее, чем: $$(«.c1»)
JQuery: jQuery(«.c1», jQuery(«#parent-container»)) гораздо быстрее, чем jQuery(«.c1»)
В первом случае мы обходим всё дерево документа, проверяя элементы на содержание класса c1, а во втором только элементы, родительским для которых является parent-container.
- Будьте осторожны с таймерами. Очень внимательно относитесь к функциям, которые используют таймеры:Однократно:(timerResource) setTimeOut(function,timeout).
Или многократно:
(timerResource) setInterval(function,timeout).
Где: function – имя функции (или неявно объявленная функция), а timeout – интервал выполнения в мск.
Предусматривайте и проверяйте условия остановки функций:
clearTimeout(timerResource),
clearInterval(timerResource)
Соответственно остановят выполнения таких функций, принимая ресурс, полученный при инициализации функций для работы с таймерами. Многократное использование объектов, оперирующих этими функциями, или установка слишком маленьких интервалов выполнения могут привести к зависанию страницы сайта.
- Очищайте за собой память. Если определенная переменная, объект, или массив больше не будут использоваться, присваивайте им значение null, что автоматически освободит занимаемую память.
- Объявляйте переменные с помощью var. Дело в том, что переменные, объявленные без ключевого слова var, находятся в глобальной области видимости, а не в контексте выполнения функции, объекта. И будут существовать вне контекста функций, объектов. А значит, после выполнения javascript память очищена не будет.
- Во время использования регулярных выражений предпочитайте объект RegEXP регулярным выражениям в контексте строк, и используйте его метод compile(‘новое регулярное выражение’) при многократном использовании регулярных выражений.Пример:
var regexp = new RegExp("pattern"); regexp.compile("new pattern");