Gli ultimi tutorial di sviluppo web
 

JavaScript Prestazione


Come velocizzare il codice JavaScript.


Ridurre l'attività in Loops

I loop sono spesso utilizzati nella programmazione.

Ogni istruzione in un ciclo, compreso il for dichiarazione, viene eseguito per ogni iterazione del ciclo.

Ricerca di dichiarazioni o incarichi che possono essere collocati al di fuori del ciclo.

Bad Codice:

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

Meglio Codice:

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

Il codice cattivo accede alla proprietà length di un array ogni volta che il ciclo viene iterato.

Il codice meglio accede alla proprietà length di fuori del ciclo, e fa girare il circuito più veloce.


Ridurre DOM Accesso

Accesso al DOM HTML è molto lenta, rispetto ad altre istruzioni JavaScript.

Se si prevede di accedere a un elemento DOM più volte, accedervi una volta, e usarlo come una variabile locale:

Esempio

obj = document.getElementById("demo");
obj.innerHTML = "Hello";
Prova tu stesso "

Ridurre DOM Size

Mantenere il numero di elementi nel codice HTML DOM piccola.

Questo sarà sempre di migliorare il caricamento della pagina, e velocizzare il rendering (visualizzazione della pagina), in particolare su dispositivi più piccoli.

Ogni tentativo di cercare il DOM (come getElementsByTagName) beneficerà di un DOM più piccolo.


Evitare inutili Variabili

Non creare nuove variabili se non si ha intenzione di salvare i valori.

Spesso è possibile sostituire il codice come questo:

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

Con questo:

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

Ritardo JavaScript Caricamento

Mettere i vostri script in fondo il corpo della pagina, il browser permette caricare la prima pagina.

Mentre uno script sta scaricando, il browser non si avvierà altri download. Inoltre tutte le attività di analisi e rendering potrebbe essere bloccato.

La specifica HTTP definisce che i browser non devono scaricare più di due componenti in parallelo.

Un'alternativa è quella di utilizzare defer="true" nel tag script. L'attributo Defer specifica che lo script deve essere eseguito dopo che la pagina ha terminato l'analisi, ma funziona solo per gli script esterni.

Se possibile, è possibile aggiungere lo script alla pagina di codice, dopo che la pagina è stata caricata:

Esempio

<script>
window.onload = downScripts;

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

Evitare Utilizzo con

Evitare di utilizzare la parola chiave con. Essa ha un effetto negativo sulla velocità. Inoltre ingombra ambiti di Javascript.

Il con parola chiave non è consentito in modalità rigorosa.