jQuery – Best Practices #6

Folosirea contextului la selectori

În articolul precedent arătasem care sunt cei mai rapizi selectori jQuery, iar acum îți voi mai da un sfat care să facă orice selector mai rapid cu 25% decăt era (dar ordinea performanței va rămâne aceeași, adică primează selectorul de ID, apoi cel de tag + clasă, apoi cel de tag, apoi cel de clasă.

<p>$("div.clasa_mea", "#element_parinte");</p>

Să explic acum de ce codul de mai sus e super super rapid. În primul rând, să explic sintaxa. jQuery acceptă și un al doilea parametru când se folosește un selector, reprezentând contextul în care se face căutarea propriu-zisă. Ce înseamnă asta ? În cazul de mai sus i-am spus lui jQuery să-mi caute elementul DIV cu clasa clasa_mea, dar să caute doar în cadrul elementului cu ID-ul element_parinte, în loc să caute tot DOM-ul cum ar fi făcut dacă nu s-ar fi precizat contextul căutării. De ce e super rapid ? În primul rând, jQuery procesează mai întâi contextul, și apelează funcția JavaScript getDocumentById( ), apoi începe căutarea în cadrul elementului găsit, căutând un element DIV ce are clasa clasa_mea. Deci e foarte rapid!

Evident că tot nu e mai rapid decât selectorul de ID. Acum precis te întrebi: dar dacă folosesc context la selectorul de ID, va fi mai rapid ? În ciuda faptului că ar părea logic, din păcate nu va fi mai rapid. Iată codul, și imediat explic și de ce:

<p>$("#myID", "#element_parinte");</p>

Dacă ai urmărit până acum ce am explicat, apelul de mai sus face două lucruri: caută elementul element_parinte cu viteza maximă a selectorului de ID, dar apoi mai face încă o căutare, cea a elementului myID. Chiar dacă va fi restrânsă căutarea doar în cadrul contextului, faptul că se mai face o căutare extra va adăuga câteva fracțiuni de secundă în plus la căutare, comparativ cu folosirea selectorului ID fără context care face doar o singură căutare.

jQuery – Best Practices #5

Traversarea eficientă a DOM-ului

Dacă folosești des selectorii jQuery, este bine să iei în considerare viteza cu care se execută diferitele tipuri de selectori. În continuare găsești cele 3 tipuri mari de selectori în ordinea performanței, primul fiind cel mai rapid:

 $("#un_id"); // cautare dupa ID $("div"); //cautare dupa tag $(".clasa") //cautare dupa clasa 

Acum, evident, urmează explicațiile. Selectorul de ID folosește funcția JavaScript getElementById( ) care e cea mai rapidă. Punct. Al doilea selector, cel de tag, este următorul cel mai rapid fiindcă folosește funcția JavaScript getElementByTagName( ) care e mai înceată decât prima. Ultimul selector, cel de clasă, este cel mai încet fiindcă nu folosește o funcție anume, ci traversează tot DOM-ul pentru a găsi ce trebuie. Dar, ca un sfat, poți folosi ultimii doi selectori într-unul singur, obținând astfel un selector mai rapid decat cel de tag:

 $("div.clasa"); 

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!

jQuery – Best Practices #3

Evitarea folosirii selectorilor în loop-uri

Bun, iată încă un sfat extrem de util din punctul de vedere al performanței (și, deci, a timpului de încărcare a unei pagini): a se evita selectarea unui obiect într-un loop. Iată un exemplu de cod ce trebuie evitat:

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

Bun, explicația e simplă. La fiecare iterație, jQuery este nevoit să caute toată structura DOM a paginii pentru a găsi mereu același obiect – este pur și simplu groaznic, și probabil execuția acelui cod va dura câteva secunde (depinde și de browser, ce-i drept). Așadar, pentru a evita astfel de întâmplări nefericite, iată cum trebuie remediat codul:

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

De data asta, codul va fi executat de până la 5 ori mai repede. Cum așa ? Păi selectorul jQuery de ID folosit pentru a accesa elementul listă folosește, de fapt, funcția JavaScript getElementById( ) care va fi executată o singură dată, nu de 10000 de ori ca în primul exemplu! Acum, chiar și a doua bucată de cod are o problemă de performanță, pe care o voi discuta în următorul articol Best Practices pentru a face codul să fie chiar și mai rapid!