Prestazioni JavaScript
Come velocizzare il tuo codice JavaScript.
Riduci l'attività in loop
I loop sono spesso usati nella programmazione.
Ogni istruzione in un ciclo, inclusa l'istruzione for, viene eseguita per ogni iterazione del ciclo.
Le istruzioni o le assegnazioni che possono essere collocate al di fuori del ciclo renderanno il ciclo più veloce.
Male:
for (let i = 0; i < arr.length; i++) {
Codice migliore:
let l = arr.length;
for (let i = 0; i < l; i++) {
Il codice errato accede alla proprietà length di un array ogni volta che il ciclo viene ripetuto.
Il codice migliore accede alla proprietà length all'esterno del ciclo e rende il ciclo più veloce.
Riduci l'accesso al DOM
L'accesso al DOM HTML è molto lento, rispetto ad altre istruzioni JavaScript.
Se prevedi di accedere a un elemento DOM più volte, accedi ad esso una volta e utilizzalo come variabile locale:
Esempio
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Riduci le dimensioni del DOM
Mantieni piccolo il numero di elementi nel DOM HTML.
Ciò migliorerà sempre il caricamento della pagina e accelererà il rendering (visualizzazione della pagina), specialmente su dispositivi più piccoli.
Ogni tentativo di ricerca nel DOM (come getElementsByTagName) beneficerà di un DOM più piccolo.
Evita variabili non necessarie
Non creare nuove variabili se non prevedi di salvare i valori.
Spesso puoi sostituire il codice in questo modo:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Con questo:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Ritarda il caricamento di JavaScript
Mettere i tuoi script nella parte inferiore del corpo della pagina consente al browser di caricare prima la pagina.
Durante il download di uno script, il browser non avvierà altri download. Inoltre, tutte le attività di analisi e rendering potrebbero essere bloccate.
La specifica HTTP definisce che i browser non devono scaricare più di due componenti in parallelo.
Un'alternativa consiste nell'usarla defer="true"
nel tag di script. L'attributo defer specifica che lo script deve essere eseguito al termine dell'analisi della pagina, ma funziona solo per gli script esterni.
Se possibile, puoi aggiungere il tuo script alla pagina tramite codice, dopo che la pagina è stata caricata:
Esempio
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Evitare l'uso con
Evita di usare la with
parola chiave. Ha un effetto negativo sulla velocità. Inoltre ingombra gli ambiti JavaScript.
La with
parola chiave non è consentita in modalità rigorosa.