Давайте рассмотрим, как можно использовать методы «ненавязчивого» 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-логики.