Share
Acest articol va prezenta zece pași simpli care vor îmbunătăți instantaneu performanța scenariului dvs. Nu-ți face griji; nu este nimic prea dificil aici. Toată lumea poate aplica aceste metode! Când ați terminat de citit, vă rugăm să ne anunțați sfaturile de viteză.
jQuery este în continuă dezvoltare și îmbunătățire. John și echipa sa cercetează mereu noi modalități de îmbunătățire a performanțelor programelor.
Ca un sidenote, acum câteva luni, a lansat Sizzle, o bibliotecă selectoră care spune că îmbunătățește performanțele programelor de până la 3 ori în Firefox.
Dacă doriți să rămâneți la curent fără să trebuiască să descărcați biblioteca o mie de ori, GIYF (Google este prietenul tău), și în această situație. Google oferă o mulțime de biblioteci Ajax din care să aleagă.
* Nota editorului: Poate că metoda mai rapidă și mai ușoară este să conectați direct la scenariu direct. În loc să codificați direct versiunea specifică a jQuery direct (1.3.2), trebuie să folosiți 1, care va face referință automată la cea mai recentă versiune a bibliotecii.
Majoritatea browserelor nu sunt capabile să proceseze mai mult de un script în același timp, astfel încât să le cozi în coadă - iar timpul de încărcare crește.
Presupunând că scripturile vor fi încărcate pe fiecare pagină a site-ului dvs. web, ar trebui să le puneți într-un singur fișier și să folosiți un instrument de comprimare (cum ar fi Dean Edwards) pentru a le minipi. Dimensiunile reduse ale fișierelor sunt egale cu viteza de încărcare mai rapid.
Scopul miniaturilor JavaScript și CSS este întotdeauna să păstreze calitățile operaționale ale codului, reducând în același timp amprenta sa totală de octeți (atât în termeni brute, cât și după gzipping, deoarece majoritatea JavaScript și CSS furnizate de serverele web de producție sunt gzipate ca parte a protocolului HTTP ). - De la compresorul YUI, un instrument excelent jQuery recomandă oficial să scrii scripturile.
Funcțiile native sunt întotdeauna mai rapide decât orice omolog.
Ori de câte ori bifați un obiect primit ca JSON, ar fi mai bine rescrie JSON-ul dvs. și faceți-l să returneze o matrice prin care puteți să vă bucurați mai ușor.
Folosind Firebug, este posibil să se măsoare timpul necesar pentru a rula fiecare dintre cele două funcții.
Accentsconagua
var array = Array nou (); pentru (var i = 0; i<10000; i++) array[i] = 0; console.time('native'); var l = array.length; for (var i=0;i 
Rezultatele de mai sus sunt 2ms pentru codul nativ și 26ms pentru metoda "fiecărui" a lui jQuery. Dacă am testat-o pe mașina mea locală și nu fac nimic (doar o simplă operație de umplere a matricei), fiecare funcție a lui jQuery durează de 10 ori mai mult decât o buclă nativă "pentru" JS. Acest lucru va crește cu siguranță atunci când se ocupă cu chestii mai complicate, cum ar fi setarea atributelor CSS sau alte operațiuni de manipulare DOM.
4. Utilizați ID-urile în loc de clase
Este mult mai bine să selectați obiecte după ID din cauza comportamentului bibliotecii: jQuery folosește metoda nativă a browserului, getElementByID (), pentru a prelua obiectul, rezultând o interogare foarte rapidă.
Deci, în loc să folosești tehnica foarte potrivită de selecție a claselor, merită să folosești un selector mai complex (pe care jQuery nu-l oferă), scrie propriul selector (da, acest lucru este posibil dacă nu găsești ceea ce nevoie) sau specificați un container pentru elementul pe care trebuie să îl selectați.
// Exemplu de creare a unei liste și de completare cu elemente // și selectarea fiecărui element odată console.time ('class'); var lista = $ ('# list'); var items = '„; pentru (i = 0; i<1000; i++) items += '- articol
„; elemente + = '
„; list.html (elemente); pentru (i = 0; i<1000; i++) var s = $('.item' + i); console.timeEnd('class'); console.time('id'); var list = $('#list'); var items = '„; pentru (i = 0; i<1000; i++) items += '- articol
„; elemente + = '
„; list.html (elemente); pentru (i = 0; i<1000; i++) var s = $('#item' + i); console.timeEnd('id'); Codul de mai sus arată cu adevărat diferențele dintre cele două moduri de selectare a elementelor, subliniind o durată neterminată de peste 5 secunde pentru a încărca fragmentul condus de clasă.
După cum se precizează în documentația jQuery,
Contextul nodului DOM inițial a trecut la jQuery () (dacă nu a fost transmis niciunul, atunci contextul va fi egal cu documentul).
Ar trebui să fie utilizat împreună cu selectorul pentru a determina interogarea exactă utilizată.
Deci, dacă trebuie să utilizați clase pentru a direcționa elementele dvs., cel puțin împiedicați jQuery să traverseze întreaga DOM utilizând selectorii corespunzător.
In loc de
$ ('' clasa '') css ('culoare' # 123456 '); mergeți întotdeauna pentru selectori contextualizați sub forma:
$ (expresie, context)
cedând astfel
$ ('' class ',' # class-container '). css (' color ',' # 123456 '); care rulează mult mai repede, deoarece nu trebuie să traverseze întreg DOM - doar elementul # class-container.
Nu faceți greșeala sau reutilizați selectorii de mai multe ori. În schimb, ar trebui să îl memorați într-o variabilă. În acest fel, DOM nu trebuie să vă urmărească din nou elementul.
Nu selectați niciodată elemente de mai multe ori într-o buclă EVER! Ar fi un criminal de viteză!
$ ('# element'). css ('culoare', '# 123456'); $ ('# element'). html ('salut'); $ ('# element'). css ('background-color', '#ffffff'); // css ('color-color', '# 123456'). html ('hello') css ('background-color', '#ffffff'); // sau chiar var element = $ ('# item'); item.css ('culoare', '# 123456'); item.html ("salut"); item.css ("culoarea de fundal", "#ffffff"); // ca pentru bucle, acesta este un mare nu-nu console.time ('nu cache'); pentru (var i = 0; i<1000; i++) $('#list').append (i); console.timeEnd('no cache'); // much better this way console.time('cache'); var item = $('#list'); for (var i=0; i<1000; i++) item.append (i); console.timeEnd('cache'); Și, după cum exemplifică următoarea diagramă, rezultatele cache-ului sunt evidente chiar și în iterații relativ scurte.
Manipularea DOM trebuie să fie cât mai restrânsă, deoarece operațiile de inserare precum prepend (), append (), după () sunt mai degrabă consumatoare de timp.
Exemplul de mai sus ar putea fi grăbit utilizând html () și construirea listei în prealabil.
var list = "; pentru (var i = 0; i<1000; i++) list += '
Ar putea părea ciudat, dar acest lucru vă ajută într-adevăr să accelerați lucrurile, în special atunci când se ocupă cu șiruri lungi de text care trebuie concatenate.
Mai întâi creați o matrice și completați-o cu ceea ce trebuie să vă alăturați. Metoda join () se va dovedi mult mai rapidă decât funcția concat ().
var array = []; pentru (var i = 0; i<=10000; i++) array[i] = '
Cu toate acestea, testele recente efectuate de Tom Trenka au contribuit la crearea următoarei scheme.
"Operatorul + = este mai rapid - chiar mai mult decât împingerea fragmentelor de șir într-o matrice și adăugarea lor în ultimul minut" și "Un tabel ca tampon șir este mai eficient pentru toate browserele, cu excepția Firefox 2.0.0.14/Windows , decât folosind String.prototype.concat.apply. " - Tom Trenka
S-ar putea să fi observat ori de câte ori funcțiile dvs. nu se întorc false, căutați în partea de sus a paginii.
Atunci când se ocupă de pagini mai lungi, acest rezultat poate fi destul de enervant.
Deci, în loc de
$ ('# item'). faceți clic (funcția () // lucrurile aici); ia timp să scrie
$ ('# item'). faceți clic pe (function () // stuff here return false;); 
Acest lucru nu este un sfat de viteză, dar ar putea ajunge, într-o rundă cam ca atare, să fiți unul dacă vă faceți timp pentru a vă găsi drumul prin cheatsheets și referințe de funcții.
Economisiți-vă ceva timp și păstrați o foaie de înșelătorie la o distanță de brat.
