10 sfaturi și trucuri JavaScript pentru a optimiza performanța

JavaScript este vital pentru dezvoltarea web. Limbajul se află în spatele majorității interactivității și animației pe care le veți vedea pe site-uri web. Dar JavaScript poate determina încetinirea unui site web dacă codul este scris prost. Ineficiența poate duce atât la timpi de încărcare slabi, cât și la viteză redusă de redare.

Adoptă următoarele practici pentru a îmbunătăți viteza și performanța site-ului tău web.

1. Definiți variabilele local

Ca programator, trebuie să știi cum funcționează delimitarea. Există două tipuri de variabile în JavaScript: variabile locale și variabile globale.

Variabilele locale sunt variabile declarate în cadrul unui bloc funcțional. Domeniul de aplicare rămâne în cadrul funcției numai în care sunt declarate. Variabilele globale sunt variabile accesibile pe tot parcursul scriptului. În cazul variabilelor globale, domeniul de aplicare rămâne pe tot parcursul programului.

Ori de câte ori încercați să accesați o variabilă, browserul face ceva cunoscut sub numele de căutare a domeniului. Verifică cel mai apropiat domeniu pentru variabilă și continuă să caute până când găsește variabila. Astfel, cu cât ai mai mult lanț de scope în programul tău, cu atât va dura mai mult pentru a accesa variabilele dincolo de sfera actuală.

Din acest motiv, cel mai bine este să definiți întotdeauna variabilele mai aproape de contextul de execuție. Utilizați variabile globale numai în cazuri rare; când doriți să stocați datele utilizate în tot scriptul, de exemplu. Acest lucru va reduce numărul de domenii din programul dvs., îmbunătățind astfel performanța.

2. Încărcați JavaScript asincron

JavaScript este un limbaj de programare cu un singur thread. Aceasta înseamnă că, odată ce o funcție este executată, trebuie să ruleze până la sfârșit înainte ca o altă funcție să poată rula. Această arhitectură poate duce la situații în care codul poate bloca firul de execuție și poate îngheța aplicația.

Pentru ca firul să funcționeze bine, ar trebui să rulați anumite sarcini care irosesc timp în mod asincron. Când o sarcină rulează în asincron, nu ocupă toată puterea de procesare a firului de execuție. În schimb, funcția se alătură unei cozi de evenimente unde este declanșată după executarea tuturor celorlalte coduri.

Apelurile API sunt perfecte pentru modelul asincron, deoarece necesită timp pentru a se rezolva. Așadar, în loc să țină firul de execuție, ați folosi o bibliotecă bazată pe promisiuni, cum ar fi API-ul fetch, pentru a prelua datele în mod asincron. În acest fel, alt cod poate rula în timp ce browserul preia date din API.

Înțelegeți complexitățile programării asincrone și veți îmbunătăți performanța aplicației dvs.

3. Evitați buclele inutile

Utilizarea buclelor în JavaScript poate fi scump dacă nu ești atent. Parcurgerea cu bicicleta printr-o colecție de articole poate pune o mare presiune asupra browserului.

Deși cu siguranță nu puteți evita buclele din codul dvs., trebuie să lucrați cât mai puțin în ele. Puteți folosi alte tehnici care evită necesitatea de a parcurge colecția.

De exemplu, puteți stoca lungimea unui tablou într-o variabilă diferită, în loc să o citiți în timpul fiecărei iterații a buclei. Dacă obțineți ceea ce doriți dintr-o buclă, ieșiți din ea imediat.

4. Reduceți codul JavaScript

Minificarea este o metodă eficientă de optimizare a codului JavaScript. Un minimizator transformă codul sursă brut într-un fișier de producție mai mic. Ele elimină comentariile, decupează sintaxa inutile și scurtează numele lungi ale variabilelor. De asemenea, elimină codul neutilizat și optimizează funcțiile existente pentru a ocupa mai puține linii.

Exemple de minimizatori sunt Google Closure Compiler, UglifyJS și Microsoft AJAX minifier. De asemenea, puteți reduce manual codul, inspectându-l și căutând modalități de optimizare. De exemplu, poți simplificați instrucțiunile if din codul dvs.

5. Comprimați fișiere mari cu Gzip

Majoritatea clienților utilizați Gzip pentru a comprima și decomprima fișiere JavaScript mari. Când un browser solicită o resursă, serverul o poate comprima pentru a returna un fișier mai mic în răspuns. Când clientul primește fișierul, îl decomprimă. În general, această abordare economisește lățime de bandă și reduce latența, îmbunătățind performanța aplicației.

6. Minimizați accesul DOM

Accesarea DOM poate afecta performanța aplicației dvs., deoarece browserul trebuie să se reîmprospăteze cu fiecare actualizare DOM. Cel mai bine este să limitați accesul DOM la cea mai mică frecvență posibilă. O modalitate prin care puteți face acest lucru este stocarea referințelor la obiectele browserului.

De asemenea, puteți utiliza o bibliotecă precum React care face modificări în DOM-ul virtual înainte de a le împinge în DOM-ul real. Drept urmare, browserul actualizează părțile aplicației care necesită actualizare, în loc să reîmprospăteze întreaga pagină.

7. Amânați încărcarea inutilă de JavaScript

Deși este esențial ca pagina să se încarce la timp, nu toate funcțiile trebuie să funcționeze la încărcarea inițială. Să presupunem că aveți un buton pe care se poate face clic și un meniu cu file care fac referire la codul JavaScript; le puteți amâna pe ambele până după ce pagina se încarcă.

Această metodă eliberează puterea de procesare, permițându-vă să randați elementele necesare ale paginii la timp. Întârziați compilarea codului care ar putea menține afișarea inițială a paginii. Apoi, odată ce pagina se termină de încărcat, puteți începe să încărcați funcționalitățile. În acest fel, utilizatorul se poate bucura de un timp de încărcare rapid și poate începe să interacționeze cu elementele la timp.

De asemenea, puteți include cea mai mică cantitate de CSS și JavaScript în elementul head, astfel încât să se încarce imediat. Codul secundar poate locui apoi în fișiere .css și .js separate. Această tehnică necesită cunoștințe decente cum funcționează DOM-ul.

8. Utilizați un CDN pentru a încărca JavaScript

Utilizarea unei rețele de livrare de conținut ajută la accelerarea timpului de încărcare a paginii, dar nu este întotdeauna eficientă. De exemplu, dacă alegeți un CDN fără un server local în țara unui vizitator, aceștia nu vor beneficia.

Pentru a rezolva această problemă, puteți utiliza instrumente pentru a compara mai multe CDN-uri și a decide care oferă cea mai bună performanță pentru cazul dvs. de utilizare. Pentru a afla care CDN este cel mai bun pentru biblioteca dvs., consultați cdnjs site-ul web.

9. Eliminați pierderile de memorie

Scurgerile de memorie pot avea un impact negativ asupra performanței unei aplicații. Scurgerile apar atunci când pagina încărcată ocupă din ce în ce mai multă memorie.

Un exemplu de scurgere de memorie este atunci când browserul începe să încetinească după o sesiune lungă de lucru cu aplicația.

Puteți utiliza Instrumentele pentru dezvoltatori Chrome pentru a detecta scurgerile de memorie în aplicația dvs. Instrumentul înregistrează cronologia în fila de performanță. Multe scurgeri de memorie apar ca urmare a eliminării elementelor DOM. Colectorul de gunoi va elibera memorie numai odată ce toate variabilele care fac referire la aceste elemente sunt în afara domeniului de aplicare.

Instrumente precum Lighthouse, Google PageSpeed ​​Insights și Chrome vă pot ajuta să detectați probleme. Lighthouse verifică probleme de accesibilitate, performanță și SEO. Google PageSpeed ​​vă poate ajuta să optimizați JavaScript pentru a îmbunătăți performanța aplicației dvs.

Browserul Chrome oferă o funcție Instrumente pentru dezvoltatori pe care o puteți comuta făcând clic pe F12 pe cuvântul dvs. cheie. Puteți folosi analiza de performanță pentru a porni și opri rețeaua și pentru a verifica consumul CPU. De asemenea, verifică alte valori pentru a descoperi problemele care vă afectează site-ul web.

În calitate de dezvoltator web, veți lucra mult în browserul dvs. web. Majoritatea browserelor vin cu o suită de instrumente pentru dezvoltatori pentru a vă ajuta cu depanarea problemelor site-ului. Funcția Instrumente pentru dezvoltatori Google Chromes are multe funcții pentru a vă ajuta.