jQuery 1.4 vs. jQuery 1.3.2

Poprzednio informowałem o wydaniu nowej wersji biblioteki jQuery – 1.4.

Teraz pora aby przyjrzeć się jej dokładniej: na początek postanowiłem sprawdzić wydajność dwóch często wykorzystywanych przeze mnie metod: html() oraz remove().

Test metody html() polegał na wykonaniu jej w pętli – 100 powtórzeń. Kod dla wersji 1.4 oraz 1.3.2 był identyczny:

[sourcecode language=”jscript”]
$("#htmlTest").click(function() {
perfChecker.setStartTime();
for (i = 0; i < 100; i++) {
$("#results").html(testMessage);
}
alert(perfChecker.getDiff());
});
[/sourcecode]

dodatkowo wykonałem ten test wykorzystując metodę standardowo dostępną w JavaScripcie – bez dodatkowych bibliotek:

[sourcecode language=”jscript”]
$("#htmlTest").click(function() {
perfChecker.setStartTime();
for (i = 0; i < 100; i++) {
document.getElementById(‘results’).innerHTML = testMessage;
}
alert(perfChecker.getDiff());
});
[/sourcecode]

Każdy z testów wykonałem 5 razy. Przedstawiony poniżej wykres przedstawia średni czas pojedynczego wykonania metody html(). Zmienna testMessage zawierała kod html składający się ze 100 paragrafów (<p>); każdy z nich zawierał 200 literowy tekst.

Test metody remove() polegał na usunięciu 1000 paragrafów (<p>) zagnieżdżonych w divie:

[sourcecode language=”jscript”]
$("#removeTest").click(function() {
perfChecker.setStartTime();
$("#results2 p").remove();
alert(perfChecker.getDiff());
});
[/sourcecode]

Tutaj również postanowiłem porównać czas wykonania standardowych metod javascript:

[sourcecode language=”jscript”]

$("#removeTest").click(function() {
perfChecker.setStartTime();
var a = document.getElementById(‘results2′);
var b = a.getElementsByTagName(‘p’);
var len = b.length;
for (var i = len; i > 0; i–) {
a.removeChild(b[i-1]);
}
alert(perfChecker.getDiff());
});
[/sourcecode]

Rzadko piszę kod w czystym JavaScripcie, dlatego jeżeli znacie bardziej wydajny sposób na usunięcie paragrafów z diva to podajcie kod w komentarzu.

A teraz pora na wyniki:

jquery_perf_test

Jak widać jQuery w wersji 1.4 całkowicie deklasuje wersję 1.3.2.

Jeżeli chodzi o konfrontacje z klasycznym JavaScriptem to w przypadku “zwykłej” zmiany zawartości elementów jQuery jest trochę wolniejszy. Jednak jeżeli weźmiemy pod uwagę łatwość pobierania elementów w jQuerym, to różnica ta nie odgrywa większej roli.

W przypadku bardziej złożonych operacji jQuery w wersji 1.4 poradził sobie najlepiej – ale tutaj mógł zaistnieć problem nie do końca optymalnej metody JavaScript użytej w teście.

Mam nadzieję, że ten post zachęci Was do dokładniejszego przyjrzenia się nowej bibliotece.

Zapraszam na kolejne posty związane z jQuerym 1.4.

jQuery 1.4 już jest!

Na początku chciałbym serdecznie powitać wszystkich Czytelników mojego bloga w nowym, dotnetowym 2010 roku!

Niezmiernie trudno podnieść się po długiej, świątecznej przerwie, ale kiedyś do świata żywych powrócić trzeba. Na początek fantastyczny news:

dzisiaj została wydana nowa wersja mojej ulubionej biblioteki javascript – jQuery 1.4! Choć dotychczasowa wersja – 1.3.2 – sprawowała się bardzo dobrze, twórcy stwierdzili, że można tam jeszcze coś poprawić :)

Największą nowością w wersji 1.4 jest poprawa wydajności wielu najczęściej używanych funkcji – szczególnie metody html(). Niedawno miałem okazję wykorzystywać tą metodę do wyświetlania dużej ilości danych i faktycznie efekty nie zawsze były zadowalające.

W nowej wersji znalazło się również kilka nowych metod, oraz ‘rozszerzono’ kilka już istniejących np. teraz do metody html() możemy przekazać funkcję, która zwróci oczekiwany tekst:

[sourcecode language=”jscript”]
$(‘a’).html(function(i,html){
return html.replace(/&amp;/gi,'<span>&amp;</span>’);
});
[/sourcecode]

Pełna lista zmian i nowości dostępna jest na stronie: http://jquery14.com/day-01/jquery-14.

Osobom, które zechcą uaktualnić wersję 1.3.2 do nowej 1.4 szczególnie polecam część poświęconą niekompatybilnym zmianom: http://jquery14.com/day-01/jquery-14#backwards.

Na dzisiaj tyle – zabieram się do testowania nowego jQuerego – jeszcze o nim na pewno napiszę…