jQuery – Best Practices #4

Manipularea eficientă a DOM-ului

În articolul precendet arătasem cum să mărești viteza codului de până la 5 ori, însă cu modificările făcute tot mai a rămas loc de îmbunătățire, lucru pe care-l voi face acum. Iată bucata de cod performantă (dar nu de-ajuns) din articolul precedent:

var obj = $("#lista_ul");
for (i=0; i<10000; i++)
   obj.append( $("<li>Item " + i + "</li>") );

Ce nu e în regulă cu codul ? Absolut totul e în regulă, dar dacă lucrezi cu gândul la performanță, nu e deloc în regulă. Hai să explic: funcțiile append, prepend, appendTo, prependTo, after, before, wrap, și cam toate care au de-a face cu manipularea DOM-ului au multe de făcut în spatele scenei, așadar codul de mai sus e foarte greu tocmai din 2 motive: apelez funcția append de 10000 de ori, și creez un obiect nou de tip

la fiecare iterație, lucru care înseamnă că la final am creat 10000 de obiecte și am apelat de 10000 de ori funcția append. E crimă curată! Cum se poate remedia ? Iată soluția:

var obj = $("#lista_ul");
var elemente = "";
for (i=0; i<10000; i++)
   s += "<li>Item " + i + "</li>";
obj.append( s );

Și ce dacă a crescut numărul de linii de cod ? De data asta avem o bucată de cod foarte performantă. Iată de ce:

1. folosim o singură dată selectorul de ID pentru a accesa lista;
2. folosim o singură dată funcția append;
3. în loc să creăm 10000 de obiecte, folosim un singur șir de text la care adăugăm mereu text simplu care mai apoi va fi folosit de funcția append ca o bucată mare de cod HTML ce va fi adăugat în listă, obținând astfel foarte repede o listă foarte mare.

Dacă ai vreo idee să îmbunătățim și mai mult performanța acestui cod, aștept cu nerăbdare sugestii! Până la următorul articol îți spun: folosește jQuery cu cap, nu doar cu ochii!