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:

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.