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!