keemor.com - Surfin' JavaScript Wave

Wydajne tworzenie elementów Document Object Model

Dynamiczne elementy DOM, które tworzą stronę i zmieniają się przy zastosowaniu AJAX’a można tworzyć na wiele sposób. Poniżej przedstawie trzy najczęściej przeze mnie używane i porównam je ze względu na wydajność. Testy zostały przeprowadzone na Firefox 3.0.3 na Ubuntu przy użyciu opcji Czas wykonania (ang. Profiler) z pluginu Firebug.

Przeczytaj także wpis Szybkie iteracje czyli przyspieszanie pętli oraz
Wydajne tworzenie elementów DOM C.D..

Na początek mamy link go, który będzie wywoływać każdą testowaną metodę. Metody wykonujemy jedna na raz i mierzymy czas wstawienia 1000 elementów listy li do ul od id list.


<a href="#" id="go">go</a>
<ul id="list"></ul>

1. Sposób

Wstawienie metodą insert elementów LI w pętli, które zostały stworzone przy pomocy silnika template z biblioteki Prototype.


$('go').observe('click',go1);
//Czas wykonania (2136.313ms, 84055 wywołań)
function go1(e){
	e.stop();
	$('list').update();
	var tpl = new Template ('<li class="#{class}" id="#{id}">#{id}</li>');
	$R(1, 1000).each(function(i){
		$('list').insert(tpl.evaluate({
			class: 'klasa',
			id: i
		}));
	})
}

Dom 1

2. Sposób

Wstawienie metodą insert elementów LI w pętli, które zostały stworzone przy pomocy konstruktora new Element.


$('go').observe('click',go2);
//Czas wykonania (1842.805ms, 57053 wywołań)		
function go2(e){
	e.stop();
	$('list').update();
	$R(1, 1000).each(function(i){
		var li = new Element('li', {
			class: 'klasa',
			id: i
		}).update(i);			
		$('list').insert(li);
	})
}

Dom 2

3. Sposób – Najszybszy

Wstawienie elementów LI w pętli do zmiennej JS list, które zostały stworzone przy pomocy silnika template z biblioteki Prototype.


$('go').observe('click',go3);		
//Czas wykonania (561.355ms, 30054 wywołań)
function go3(e){
	e.stop();
	var tpl = new Template ('<li class="#{class}" id="#{id}">#{id}</li>');
	var list = new String;			
	$R(1, 1000).each(function(i){				
		list += tpl.evaluate({class: 'klasa', id: i});				
	})			
	$('list').update(list);
}

Dom 3

Wniosek

Trzeci sposób jest cztery razy szybszy od pierwszego.

Najbardziej zasobożerne metody to stripScripts oraz extractStrips, które są wywoływane przy każdy wykorzystaniu metod insert i update.

Jeśli mamy bardziej zaawansowaną aplikację (RIA) to zmieniając sposób tworzenia elementów DOM, możemy ją znacząco przyspieszyć.