Șase bune practici jQuery pentru performanțe îmbunătățite

jQuery este unul dintre cele mai populare biblioteci JavaScript astăzi. API-ul său este foarte ușor de utilizat, ducând la o curbă de învățare atât de abruptă. O mulțime de proiecte utilizează codul jQuery în loc să utilizeze direct JavaScript-ul vanilie pentru a aduce funcții dinamice.

Dar jQuery are și ei lipsurile. Poate duce la unele probleme legate de performanță, dacă sunt folosite fără griji la fel ca limba pe care se bazează. Acest post va lista câteva dintre cele mai bune practici în utilizarea jQuery care ne vor ajuta să evităm orice probleme legate de performanță.

1. Sarcini de încărcare leneș când este necesar

Browserele rula JavaScript înainte de a crea copac DOM și pictura pixelii de pe ecran, deoarece script-uri pot adăuga noi elemente la pagina sau a schimba aspectul sau stilul unor noduri DOM. Deci, prin oferind browserului mai puține scripturi de executat în timpul încărcării paginii, noi putem reduce timpul necesar pentru crearea și crearea vopselei fin DOM, după care va fi utilizatorul capabil să vadă pagina.

O modalitate de a face acest lucru în jQuery este prin utilizarea $ .getScript pentru a încărca orice fișier de script în momentul nevoii sale, mai degrabă decât în ​​timpul încărcării paginii.

$ .getScript ("scripts / gallery.js", apel invers); 

Este o functie ajax, care va primi un singur fișier script atunci când îl doriți, dar rețineți că fișierul nu este preluat în cache. Pentru a activa cache-ul pentru getScript va trebui să activați același lucru pentru toate solicitările ajax. Puteți face acest lucru folosind codul de mai jos:

$ .ajaxSetup (cache: true); 

2. Evitați $ (fereastră) .load () dacă scriptul dvs. nu are nevoie de sub-resurse ale paginii

$ (document) .ready () este echivalent cu DOMContentLoaded (Unde DOMContentLoaded este disponibil) și $ (fereastră) .load () la Sarcină. Prima este declanșată atunci când este încărcată DOM-ul unei pagini, dar nu activele externe precum imaginile și foile de stil. Al doilea este concediat atunci când totul este alcătuit dintr-o pagină, inclusiv conținutul său propriu și sub-resursele sale sunt încărcate.

Deci, dacă scrieți un script care se bazează pe sub-resursele unei pagini, cum ar fi schimbarea culorii de fundal a unei pagini div care este stilul unei foi de stiluri externe, este mai bine să o utilizați $ (fereastră) .load ().

Dar, dacă nu este cazul, e mai bine să rămânem $ (document) .ready () pentru că jQuery o numește gata manipulator eveniment dacă utilizați $ (document) .ready () sau nu, așa că folosiți-l când puteți.

3. Utilizați desprinde pentru a elimina elemente din DOM care trebuiau schimbate.

“reflow” este un termen care se referă la modificări de aspect într-o pagină Web, este atunci când browser-ul rearanjează elementele unei pagini pentru a găzdui un element nou, se adapteze la schimbările structurale ale unui element, umple golul lăsat de un element îndepărtat, sau o altă acțiune care are nevoie de un modificarea layout-ului în pagină. reflow este un scump proces de browser.

Putem reduce numărul nr. din fluxurile de date provocate de modificările structurale ale unui element prin efectuarea modificărilor pe acesta după scoaterea din fluxul paginii și punându-l înapoi când sa terminat. Dacă adăugați mai multe rânduri într-o masă unul câte unul, va provoca o mulțime de reflow-uri. Deci este mai bine scoateți tabela afară din arborele DOM, adăugați rândurile și plasați-o în DOM; acest lucru va reduce fluxurile.

lui jQuery desprinde() ne permite să eliminăm un element din pagină, este diferit de elimina() deoarece va salva datele asociate elementului atunci când trebuie să fie adăugat ulterior la pagină. Un element detașat poate fi apoi readus în pagină când a fost modificat.

4. Utilizați css () pentru a seta înălțime sau lățime în loc de înălţime() și lăţime()

Dacă setați înălțimea sau lățimea unui element în jQuery, vă sugerăm să utilizați css () deoarece setarea acestor valori se face folosind înălţime() și lăţime() va provoca refolosiri suplimentare datorită accesării anumitor proprietăți de aspect în funcție computeStyleTests în jQuery (testat în ultima versiune).

Pentru cod p.height ( "300px"); aici sunt reluările.

Pentru p.css ("înălțime": "300px");

computeStyleTests este folosit pentru a face unele teste de suport. De asemenea, este chemat în timp obtinerea înălțimea și lățimea folosind ambii css () și Înălțime lățime() , dar pentru cadru este chemat doar Înălțime lățime() care nu pot fi necesare, utilizați astfel css () in schimb.

5. Nu accesați în mod inutil proprietățile layout-ului

Accesarea proprietăților layout-ului, cum ar fi înălțimea, lățimea, marginea etc., va declanșa reflow în pagină. Motivul este de fiecare dată când întrebați browser-ul pentru oricare dintre proprietățile layout-ului asigurați-vă că obțineți valoarea actualizată (în cazul în care valoarea a fost invalidată înainte) prin recalcularea valorilor și aplicarea oricărei modificări a aspectului.

Deci, dacă utilizați jQuery sau vanilla JavaScript, aveți grijă să accesați în mod inutil proprietățile layout-ului mai ales într-o buclă sau, în consecință, după modificarea stilului.

6. Folosiți caching-ul unde puteți

Unele funcții ale jQuery au mecanisme de caching care pot fi folosite. Ajax cererile fac cache resurse, dar nu este disponibil pentru scenariu și JSONP, dacă doriți să memorați cache-ul în toate solicitările dvs. ajax, poate doriți setați-l la nivel global ca mai jos.

Rețineți, de asemenea, că dacă preluați resursele utilizând post acesta nu va fi stocat în cache chiar dacă activați cache-ul cu configurația de mai sus.

Cum am spus mai devreme, desprinde() stochează datele asociate cu elementul care urmează să fie eliminat spre deosebire elimina();ascunde() cache-ul CSS inițial afişa valoarea unui element înainte de ao ascunde astfel încât să poată fi restaurată ulterior fără a pierde datele.

Concluzie

O modalitate puteți fi sigur că utilizați cel mai eficient cod jQuery pentru nevoia ta este să aștepte până ce ați rula de fapt, codul și am observat dacă există vreo problemă de performanță sau nu. Dacă există, utilizați instrumentele de performanță și depanatorul la detectați rădăcina problemei.

Deoarece jQuery este ca un cocon pentru JavaScript cu funcționalități suplimentare pentru compatibilități browser-ul și caracteristici, poate fi dificil de diagnosticat problemele fără aceste instrumente.