Ускоряем обработку событий

Давайте рассмотрим, как можно использовать методы «ненавязчивого» JavaScript для максимального ускорения обработки событий в браузере. Мы можем уменьшить число приемников событий, которые назначены документу, путем определения одного приемника для контейнера и проверки в обработчике, из какого дочернего элемента всплыло это событие.

Предположим, что у нас основная навигация по сайту включает шесть ссылок сверху, четырем из которых требуются обработчики событий, чтобы поменять у них атрибут href. У этих четырех ссылок атрибут class выставлен в bundle.

Скорее всего, ситуация будет выглядеть следующим образом.

var MenuNavigation = {

init: function() {

var navigation = document.getElementById('mainNav');

var links = navigation.getElementsByTagName('a');

for ( var i = 0, j = links.length; i < j; ++i ) {

if ( /bundle/i.test(links[i].className) ) {

links[i].onclick = this.onclick;

}

}

},

onclick: function() {

this.href = this.href + '?name=value';

return true;

}

}

В этом фрагменте довольно много лишнего. Во‑первых, метод getElementsByTagName просматривает каждый дочерний DOM‑узел в элементе mainNav, чтобы найти все ссылки. Затем мы еще раз пробегаем по всему найденному массиву, чтобы проверить имя класса каждой ссылки. Это пустая трата процессорного времени на каждом этапе. И это замедление загрузки страницы на уровне JavaScript‑логики.