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 + '';
	}
	$('list').update(list);
}

(więcej…)

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
		}));
	})
}

(więcej…)

Test Acid3 ma na celu sprawdzenie przeglądarek pod kątem zgodności ze standardami internetowymi wyznaczanymi przez organizację W3C.
Test kładzie szczególny nacisk na Document Object Model i JavaScript, które są podstawowymi elementami strony związanymi z dynamicznymi aplikacjami internetowymi.

Poniżej prezentuje aktualne wyniki testu, przy czym maksimum czyli przejście testu wynosi 100 punktów:

• IE 8 – 20pkt.
• IE 8 Beta Win 7 – 21pkt.
• IE 7 – 12pkt.
• FF 2 – 54pkt.
• FF 3.0.7 – 71pkt.
• Chrome 1.0 – 79pkt.
• Opera 9.63 – 85pkt.
• Safari 4 Public Beta – 100pkt.

(więcej…)

Wyszukiwarka

będzie szukać po naszych kontaktach w Contails.com. Wymaga wcześniejszego zalogowania się do serwisu, ponieważ nasze kontakty są zabezpieczone hasłem i musimy mieć aktywną sesję z serwisem.

Wyszukiwarka będzie obsługiwać sugestie w Firefoxie 2 i 3 oraz w IE8.
W IE7 będzie po prostu przekierowywać na wyniki wyszkiwania w Contails.
(więcej…)