keemor.com - Surfin' JavaScript Wave

Wydajne tworzenie elementów DOM C.D.

W poprzednim wpisie przedstawiłem trzy sposoby dynamicznego tworzenia elementów DOM przy użyciu biblioteki Prototype.

Przeczytaj także wpis Szybkie iteracje czyli przyspieszanie pętli.

Po komentarzu Medikoo postanowiłem jeszcze sprawdzić jaki czas wykonania tego samego zadania można osiągnąć używając czystego Javascriptu.

4. Sposób

Zamiast metody each użyłem funkcji for i czas zmalal z okolo 0.5 sekundy do 0.25 sekundy. W tym rozwiązaniu zostawiłem metodę update.


//Czas wykonania (276.941ms, 24 wywołań)
function go4(e){
	e.stop();
	var list = new String;
	var i=1;
	for (i = 1; i <= 1001; i++) {
		list += '<li class="klasa" id="a'+ i + '">'+ i + '</li>';
	}
	$('list').update(list);
}

5. Sposób

W ostatnim przypadku pozbyłem się metody update i fakt przyspiesznia, aż do 0.05 sekundy mnie zaskoczył. To, że czysty JS jest najszybszy można się domyślić, ale różnica jest dość znaczna.


//Czas wykonania (0.064ms, 4 wywołań)		
function go5(e){
	e.stop();	
	var list = new String;				
	var i=1;
	for (i = 1; i <= 1001; i++) {
		list += '<li class="klasa" id="a'+ i + '">'+ i + '</li>';		
	}
	var ul = document.getElementById('list');	
	ul.innerHTML = list;	 
}

Rozpatrywany tutaj problem, jest tylko malutkim wycinkiem całej aplikacji nad, którą pracuję i nie bardzo wyobrażam sobie napisanie jej bez użycia jakiejś biblioteki. Warto jednak zdawać sobie sprawę, że nie wszystko złoto co się świeci.

SlickSpeed Selectors & TaskSpeed Tests

Na koniec tych dywagacji warto przyjrzeć się dwóm testom, które dają wiele materiału do przemyśleń na temat wydajności budowanych aplikacji.

Pierwszy to SlickSpeed Selectors, który bada prędkość różnych odwołań do drzewa DOM, w różnych bibliotekach.

Drugi natomiast to TaskSpeed Tests, który bada szybkość wykonania standardowych metod w bibliotekach jQuery, Prototype, MooTools, qooxdoo, Dojo czy YUI w porówaniu do metod w czystym JS tzw. PureDom.