Рассмотрим способы увеличения производительности выборки DOM элемента. Конечно, многие скажут, что это мелочи, зачем заморачиватьcя ради нескольких миллисекунд и так далее. Действительно, разница может быть не заметна в небольших функциях, но полноценное Web приложение безусловно станет работать быстрее.

Кроме того, описанные ниже приемы сделают Ваш код станет чище, что станет хорошим примером для остальных.

Кешируйте результаты выборки

Наиболее часто встречающаяся ошибка. Старайтесь как можно реже вызывать функцию выборки $() и $$().

// Плохой пример
$$('.someClass').setStyle('marginTop', 10);
$$('.someClass').setStyle('color', 'red');
$$('.someClass').addEvent('click', function(){ ... });

// Хороший пример
$$('.someClass').setStyles({
	marginTop: 10,
	color: 'red'
}).addEvent('click', someFunction);

// Использование переменных
var elements = $$('.someClass');

elements.setStyle('marginTop', 10);
elements.setStyle('marginLeft', 5);
elements.addEvent('click', function(){ ... });

В первом случае Вы вынуждаете браузер несколько раз обходить дерево и искать элементы с классом someClass, таким образом затратив лишние миллисекунды. Не так уж много, но все же.

Второй пример - вызов функций по цепочке. Требуемые элементы отбираются 1 раз, над ними последовательно выполняются действия.

Третий пример также подходит Вам. Если Вы не можете выполнить действия последовательно, сохраните результат выборки в переменной, и используйте ее в дальнейшем.

Поиск по тегам

Если элементы с одинаковым тегом, укажите его. Это позволит Вам сократить драгоценное время.

// Плохой пример
$$('.someClass').doSomething();

// Хороший пример
$$('a.someClass').doSomething();

Ограничивайте место поиска

Сокращайте время выборки, указав обший элемент родитель. Функция .getElements() работает так же, как и $$(), однако диапазон поиска заметно меньше.

// Плохой пример
$$('.someClass').doSomething();

// Хороший пример
$('someElement').getElements('.someClass').doSomething();