Cum să accelerați codul JavaScript

Reduceți activitatea în buclă. Buclele sunt adesea folosite în programare.

Fiecare instrucțiune dintr-o buclă, inclusiv instrucțiunea pentru, este executată pentru fiecare iterație a buclei. Declarațiile sau sarcinile care pot fi plasate în afara buclei vor face ca bucla să funcționeze mai repede.

Non performant:

var i;
for (i = 0; i < arr.length; i++) {

Codul optimizat:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

Codul neperformant accesează proprietatea de lungime a unei matrice de fiecare dată când se repetă bucla. Codul mai bun accesează proprietatea de lungime în afara buclei și face bucla să cicleze mai rapid.

Reduceți accesul DOM

Accesul la DOM-ul HTML este foarte lent, în comparație cu alte declarații JavaScript. Dacă vă așteptați să accesați un element DOM de mai multe ori, accesați-l o dată și utilizați-l ca variabilă locală:

Exemplu

var obj;
obj = document.getElementById(“demo”);
obj.innerHTML = “Hello”;

Reduceți dimensiunea DOM

Păstrați un număr mic de elemente în DOM HTML. Acest lucru va îmbunătăți întotdeauna încărcarea paginilor și va grăbi randarea (afișarea paginilor), în special pe dispozitivele mai mici. Fiecare încercare de a căuta în DOM (ca getElementsByTagName) va beneficia de un DOM mai mic.

Evitați variabilele inutile. Nu creați variabile noi dacă nu intenționați să salvați valori. De multe ori puteți înlocui codul astfel:

var fullName = firstName + ” ” + lastName;
document.getElementById(“demo”).innerHTML = fullName;

Cu codul optimizat

document.getElementById(“demo”).innerHTML = firstName + ” ” + lastName

Întârziere încărcare JavaScript

Punerea scripturilor dvs. în partea de jos a corpului paginii permite browserului să încarce prima pagină.În timpul descărcării unui script, browserul nu va porni alte descărcări. În plus, toate activitățile de parsing și redare pot fi blocate. Specificația HTTP definește că browserele nu ar trebui să descarce mai mult de două componente în paralel.

O alternativă este să utilizați defer = “true” în eticheta script.

Atributul deferă specifică faptul că scriptul ar trebui să fie executat după terminarea parcurgerii paginii, dar funcționează numai pentru scripturi externe. Dacă este posibil, puteți adăuga scriptul pe pagină după cod după încărcarea paginii:

Exemplu

<script>
window.onload = function() {
var element = document.createElement(“script”);
element.src = “myScript.js”;
document.body.appendChild(element);
};
</script>

Evitați utilizarea de tipul următor:

Evitați utilizarea cuvântului cheie “cu”. Are un efect negativ asupra vitezei.  De asemenea, se confruntă cu domeniile JavaScript. “Cu” cuvântul cheie nu este permis în mod strict.