Кеш vs. getElementById()

HTML и CSS XSLT JavaScript Изображения Софт Etc

	Задача.	Уменьшить число вызовов функции getElementById().

Функцией getElementById() пользуются чаще других. Но если на странице слишком много элементов, которые требуется неоднократно найти, скрипт работает непозволительно медленно.

Многократно проверенный способ улучшить ситуацию — предварительно создать массив и поместить в него указатели на все элементы, к которым программа обращается наиболее часто. Вместо непосредственного вызова getElementById()

for (var c = 0; c != 1000; c++)
{
	var Span = document.getElementById ('ID' + c);
	Span.className = Span.className == 'b' ? 'a' : 'b';
}

следует сформировать массив ссылок

function BuildCache()
{
	Cache = new Array();
	for (var c = 0; c != 1000; c++)
		Cache[c] = document.getElementById ('ID' + c);
}

и в дальнейшем применять именно его:

for (var c = 0; c != 1000; c++)
{
	var Span = Cache[c];
	Span.className = Span.className == 'b' ? 'a' : 'b';
}

Например, ускорение жизненно необходимо на странице с инкрементальным поиском по нашему портфолио. Отсутствие кеша не создавало проблем лишь до тех пор, пока число пунктов в этой таблице не превышало 600-700.

Вне веба

В обычном программировании предварительно вычисленные и сохраненные данные называют таблицами поиска или таблицами просмотра (lookup tables). В сочетании с другими математическими и алгоритмическими трюками они позволяют ускорять вычисления в тысячи раз.

Оцените пользу от кеша, перекрашивая тысячу звезд (изменение скорости заметно на глаз, но педанты могут увеличить число точек или измерить время). Кеш заполняется при первом нажатии соответствующей кнопки.

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

Наибольший прирост производительности получается в MSIE. В Safari и FireFox’е скорость практически одинакова. А Opera проявила себя лучше всех. Даже без кеша она перебирает элементы с такой скоростью, которую не обеспечивает кеш в MSIE.

Кеш vs. getElementById()

13 января 2006