Come accelerare l'esecuzione del codice JavaScript

Quando si sviluppa un'app o un sito Web, uno degli elementi più cruciali da considerare sono le prestazioni dell'app o del sito Web. Come utente, non vorrei che nessuna app impiegasse molto tempo a caricare o ogni volta che faccio clic su qualcosa e devo aspettare un po 'di azione. Spesso se la pagina Web impiega 5-6 secondi per caricare la maggior parte degli utenti, incluso, lascerebbe la pagina web.

Per gli sviluppatori web, JavaScript è uno strumento fantastico. Ogni sviluppatore web ha imparato JavaScript ad un certo punto della loro vita. Tuttavia, il codice JavaScript scarso si traduce in siti Web più lenti.

Con questo in mente, uno sviluppatore guarda sempre i modi per migliorare la sua pagina web. Sei fortunato perché oggi parleremo di come accelerare l'esecuzione del codice JavaScript.

Riduzione delle attività nei loop

Un programmatore usa spesso loop per abbreviare il suo codice. Tuttavia, si dovrebbe tenere presente che ci sono alcuni modi cattivi di usare i loop che rendono rallenta il programma.

Facciamo un esempio di loop "per".

Esempio:

Questo ciclo è a livello di programmazione, ma le sue prestazioni saranno cattive. Possiamo mettere il myarray.Dichiarazione di lunghezza al di fuori del ciclo in modo che non debba calcolare la lunghezza ancora e ancora fino al termine del ciclo.

Soluzione:

LET LEN = MyArray.lunghezza;
per (let i = 0; i < len; i++)
//Ciao

In questo ciclo, possiamo vedere che la lunghezza è fissa e il ciclo non deve calcolare la lunghezza di un array ogni volta. Quindi, la velocità aumenta e anche le prestazioni.

Riduzione dell'accesso DOM

Se confrontiamo l'istruzione JavaScript con l'accesso a HTML DOM, scopriremo che l'accesso a HTML DOM è molto lento. Questo non è un problema se non accediamo o eseguiamo molte operazioni DOM. Tuttavia, quando si eseguono molte operazioni DOM, influisce sulla velocità della pagina web.

La soluzione per questo è archiviare l'elemento DOM in una variabile locale e quindi possiamo accedervi più volte.

Per esempio:

const myobj = documento.getElementById ("velocità"), internitml = "non raggiunto";
const myobj = documento.getElementById ("velocità").nascosto = "falso";
// rallenta e ostacola la velocità

Questo rende il nostro programma eseguire in modo inefficiente.

Diamo un'occhiata a un altro esempio che affronta questo problema.

const myobj = documento.getElementById ("velocità");
myobj.InnerHtml = "raggiunto";
myobj.nascosto = "falso";

Ora che abbiamo esaminato la riduzione dell'accesso DOM, facciamo brillare la luce sulla riduzione delle dimensioni DOM per migliorare la velocità della nostra pagina web in JavaScript.

Riduzione delle dimensioni DOM

Prima di entrare nella riduzione delle dimensioni del DOM, esaminiamo la dimensione DOM eccessiva, il che significa che la tua pagina ha troppi nodi DOM/componenti HTML se la dimensione DOM è troppo grande. Può anche significare che gli elementi DOM della pagina sono profondamente nidificati. Ciò si traduce nel consumo di più potenza, riducendo quindi le prestazioni o la velocità della pagina.

La soluzione è che il numero di elementi dovrebbe essere ridotto al minimo nel dom HTML. Il vantaggio di ciò è che migliorerà il caricamento della pagina e accelera il processo di rendering che è la visualizzazione della pagina. È molto utile soprattutto su dispositivi più piccoli come i telefoni cellulari, ecc.

Eliminando variabili inutili

Questo è il trucco più semplice per migliorare le prestazioni della pagina web. Perché fare variabili quando non sono necessarie? Inoltre, perché fare variabili in cui sai che lo stai solo usando per mostrarlo da qualche parte? Quando evitiamo di apportare variabili non necessarie, le prestazioni della nostra pagina web aumentano.

Ad esempio il codice cattivo:

Let FirstName = "Jhon";
Let LastName = "Cena";
let fullName = FirstName+""+LastName;
avviso (fullname);

In questo esempio, possiamo vedere che stiamo archiviando il primo nome e il nello Last in fullname solo per visualizzarlo in un avviso. Non sarebbe meglio avvisare direttamente il primo nome e il lastname? Questo è ciò che elimina le variabili non necessarie.

Soluzione (buon codice):

Let FirstName = "Jhon";
Let LastName = "Cena";
Avviso (firstName+""+LastName);

Caricamento di ritardo di JavaScript

Per migliorare le prestazioni della tua pagina web in JavaScript, è una pratica comune inserire un tag di script o all'interno del tag script il codice JavaScript alla fine della pagina HTML. Lo scopo principale è che il browser dovrebbe caricare prima l'HTML e quindi il codice JavaScript. Per dirla in termini tecnici, mentre uno script sta scaricando, il browser non avverrà altri download e tutto l'analisi e il rendering verrà bloccato.

Possiamo anche usare "Defer =" True "" nel nostro tag script. La funzione dell'attributo Defer è che specifica che lo script dovrebbe essere eseguito solo una volta che la pagina è finita. In altre parole, aspetta fino a quando l'intero DOM viene caricato. Va notato, tuttavia, che è compatibile solo con gli script esterni.

Esempio:

Evita di usare la parola chiave "con"

Con la parola chiave viene utilizzata per fare riferimento alle proprietà o ai metodi di un oggetto in quanto è una sorta di stenografia. L'uso della parola chiave "con" rallenta la velocità. L'altro motivo per non usare la parola chiave è che si ingrassa gli ambiti di JavaScript.

Minify JavaScriptCode

Minificazione o minimizzazione del codice JavaScript è un altro metodo per accelerare l'esecuzione del nostro codice JavaScript. Il codice JavaScript minimizzante significa semplicemente rimuovere o modificare tutti i caratteri indesiderati e non necessari all'interno del codice sorgente JavaScript ma senza modificare la funzionalità del programma. Include più cose come la rimozione di commenti, punti e virgole e spazi bianchi. Oltre a ciò comporta anche l'uso di funzionalità breve e nomi variabili. Vediamo un esempio prima e dopo la minificazione del nostro codice:

Prima di minimizzare:

//la funzione
// Quale registro della console
// Il primo messaggio di persona
funzione firstMessage (name)
console.log ("Il primo messaggio è da:", nome);

// Ora chiama la funzione
FirstMessage ("John");

Dopo la minimizzazione:

funzione fmsg (n) console.log ("Il primo messaggio è da:", n) firstMessage ("John");

Conclusione

Uno sviluppatore mantiene sempre l'equilibrio tra l'affidabilità e l'ottimizzazione del codice. È per questo motivo che abbiamo discusso di come accelerare l'esecuzione del codice JavaScript in questo articolo. Tutti i suggerimenti e i trucchi sopra menzionati se usati insieme avranno un miglioramento significativo sulla velocità del codice JavaScript. Tuttavia, si dovrebbe tenere presente che, sebbene sia necessaria le prestazioni, non è al di sopra di rilevare errori o aggiungere funzionalità.