Prestazioni JavaScript

Come accelerare il tuo codice JavaScript.

Riduci l'attività nel ciclo

Il ciclo è spesso utilizzato nella programmazione.

Con ogni iterazione del ciclo, ogni istruzione nel ciclo, inclusi for Le istruzioni eseguite.

Le istruzioni o le assegnazioni che possono essere spostate fuori dal ciclo renderanno il ciclo più veloce.

Un codice peggiore:

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

Un codice migliore:

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

Il codice cattivo accede all'array length proprietà.

Il codice migliore accede all'attributo fuori dal ciclo. length proprietà, rendendo il ciclo più veloce.

Riduci gli accessi al DOM

Accessare l'HTML DOM è molto più lento rispetto al JavaScript.

Se ti aspetti di accedere a un elemento DOM più volte, accedevi una volta sola e utilizzalo come variabile locale:

Esempio

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

Prova tu stesso

Riduci la dimensione del DOM

Cerca di mantenere un numero ridotto di elementi nel DOM HTML.

Questo metodo migliora sempre il caricamento della pagina e velocizza la rendering (visualizzazione della pagina), specialmente sui dispositivi più piccoli.

Ogni volta che cerchi di cercare nel DOM (ad esempio getElementsByTagNameTutto questo beneficerà di un DOM più piccolo.

Evita le variabili non necessarie

Non creare nuove variabili non intenzionate a memorizzare valori.

Di solito puoi sostituire il codice:

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

Usa questo codice:

document.getElementById("demo").innerHTML = firstName + " " + lastName

Ritarda il caricamento del JavaScript

Metti lo script alla fine della pagina, in modo che il browser carichi prima la pagina.

Quando lo script viene scaricato, il browser non avvia nessun altro download. Inoltre, tutte le attività di parsing e rendering possono essere bloccate.

La specifica HTTP stabilisce che il browser non dovrebbe scaricare in parallelo più di due tipi di elementi.

Un'opzione è l'uso di defer="true".L'attributo defer stabilisce che lo script deve essere eseguito dopo che la pagina è stata completamente解析ata, ma si applica solo agli script esterni.

Se possibile, è possibile aggiungere script alla pagina tramite codice una volta completato il caricamento della pagina:

Esempio

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

Evitare di utilizzare with

Evitare di utilizzare with Parola chiave. Ha un impatto negativo sulla velocità. Inoltre, può confondere l'ambito di JavaScript.

In modalità stricto.Non permesso Parola chiave with.