10 suggerimenti e trucchi JavaScript per ottimizzare le prestazioni

JavaScript è vitale per lo sviluppo web. La lingua è alla base della maggior parte dell'interattività e dell'animazione che vedrai sui siti web. Ma JavaScript può anche causare il rallentamento di un sito Web se il codice è scritto male. Le inefficienze possono comportare tempi di caricamento scadenti e una velocità di rendering ridotta.

Adotta le seguenti pratiche per migliorare la velocità e le prestazioni del tuo sito web.

1. Definisci le variabili a livello locale

Come programmatore, devi sapere come funziona l'ambito. Esistono due tipi di variabili in JavaScript: variabili locali e variabili globali.

Le variabili locali sono variabili dichiarate all'interno di un blocco funzione. L'ambito rimane all'interno della funzione solo in cui sono dichiarati. Le variabili globali sono variabili accessibili in tutto lo script. Nel caso di variabili globali, l'ambito rimane in tutto il programma.

Ogni volta che si tenta di accedere a una variabile, il browser esegue una operazione nota come ricerca dell'ambito. Controlla l'ambito più vicino per la variabile e continua a cercare finché non trova la variabile. Pertanto, più catena di ambito hai nel tuo programma, più tempo ci vorrà per accedere alle variabili oltre l'ambito corrente.

Per questo motivo, è meglio definire sempre le variabili più vicine al contesto di esecuzione. Utilizzare le variabili globali solo in rare occasioni; quando si desidera archiviare i dati utilizzati in tutto lo script, ad esempio. Ciò ridurrà il numero di ambiti nel programma, migliorando così le prestazioni.

2. Carica JavaScript in modo asincrono

JavaScript è un linguaggio di programmazione a thread singolo. Ciò significa che una volta che una funzione viene eseguita, deve essere eseguita fino alla fine prima che un'altra funzione possa essere eseguita. Questa architettura può portare a situazioni in cui il codice può bloccare il thread e bloccare l'app.

Per mantenere il buon funzionamento del thread, è necessario eseguire alcune attività che fanno perdere tempo in modo asincrono. Quando un'attività viene eseguita in asincronia, non occupa tutta la potenza di elaborazione del thread. Al contrario, la funzione si unisce a una coda di eventi in cui viene attivata dopo l'esecuzione di tutti gli altri codici.

Le chiamate API sono perfette per il modello asincrono perché richiedono tempo per essere risolte. Quindi, invece di farlo trattenere il thread, utilizzeresti una libreria basata su promesse come l'API fetch per recuperare i dati in modo asincrono. In questo modo, altro codice può essere eseguito mentre il browser recupera i dati dall'API.

Comprendi le complessità della programmazione asincrona e migliorerai le prestazioni della tua applicazione.

3. Evita cicli inutili

Utilizzo di loop in JavaScript può essere costoso se non stai attento. Scorrere una raccolta di elementi può mettere a dura prova il browser.

Anche se sicuramente non puoi evitare i loop nel tuo codice, devi lavorarci il meno possibile. È possibile utilizzare altre tecniche che evitano la necessità di scorrere la raccolta.

Ad esempio, puoi memorizzare la lunghezza di un array in una variabile diversa, invece di leggerla durante ogni iterazione del ciclo. Se ottieni quello che vuoi da un loop, esci immediatamente.

4. Minimizza il codice JavaScript

La minimizzazione è un metodo efficace per ottimizzare il codice JavaScript. Un minimizzatore trasforma il tuo codice sorgente non elaborato in un file di produzione più piccolo. Rimuovono i commenti, tagliano la sintassi non necessaria e accorciano i nomi di variabili lunghi. Rimuovono anche il codice inutilizzato e ottimizzano le funzioni esistenti per occupare meno righe.

Esempi di minimizzatori sono Google Closure Compiler, UglifyJS e Microsoft AJAX minifier. Puoi anche minimizzare manualmente il tuo codice ispezionandolo e cercando modi per ottimizzarlo. Ad esempio, puoi semplificare le istruzioni if ​​nel codice.

5. Comprimi file di grandi dimensioni con Gzip

La maggior parte dei clienti usa Gzip per comprimere e decomprimere grandi file JavaScript. Quando un browser richiede una risorsa, il server può comprimerla per restituire un file più piccolo nella risposta. Quando il client riceve il file, lo decomprime. Nel complesso, questo approccio consente di risparmiare larghezza di banda e riduce la latenza, migliorando le prestazioni dell'applicazione.

6. Riduci al minimo l'accesso al DOM

L'accesso al DOM può influire sulle prestazioni della tua applicazione perché il browser deve aggiornarsi a ogni aggiornamento del DOM. È meglio limitare l'accesso DOM alla minore frequenza possibile. Un modo per farlo è memorizzare i riferimenti agli oggetti del browser.

Puoi anche utilizzare una libreria come React che apporta modifiche al DOM virtuale prima di inviarle al DOM reale. Di conseguenza, il browser aggiorna le parti dell'applicazione che devono essere aggiornate, invece di aggiornare l'intera pagina.

7. Rinvia il carico non necessario di JavaScript

Sebbene sia essenziale che la tua pagina venga caricata in tempo, non tutte le funzioni devono funzionare al caricamento iniziale. Supponiamo di avere un pulsante cliccabile e un menu a schede che fa riferimento al codice JavaScript; puoi posticipare entrambi fino a dopo il caricamento della pagina.

Questo metodo consente di liberare potenza di elaborazione, consentendo di eseguire il rendering degli elementi di pagina necessari in tempo. Si ritarda la compilazione del codice che potrebbe contenere la visualizzazione iniziale della pagina. Quindi, una volta terminato il caricamento della pagina, puoi iniziare a caricare le funzionalità. In questo modo, l'utente può godere di tempi di caricamento rapidi e iniziare a interagire con gli elementi in tempo.

Puoi anche includere la minima quantità di CSS e JavaScript nel tuo elemento head, in modo che si carichi immediatamente. Il codice secondario può quindi risiedere in file .css e .js separati. Questa tecnica richiede una discreta conoscenza di come funziona il DOM.

8. Usa un CDN per caricare JavaScript

L'utilizzo di una rete di distribuzione dei contenuti aiuta ad accelerare il tempo di caricamento della pagina, ma non è sempre efficace. Ad esempio, se scegli un CDN senza un server locale nel paese di un visitatore, non ne trarranno vantaggio.

Per risolvere questo problema, puoi utilizzare gli strumenti per confrontare diversi CDN e decidere quale offre le migliori prestazioni per il tuo caso d'uso. Per sapere quale CDN è il migliore per la tua libreria, dai un'occhiata al cdnjs sito web.

9. Rimuovere le perdite di memoria

Le perdite di memoria possono influire negativamente sulle prestazioni di un'applicazione. Le perdite si verificano quando la pagina caricata occupa sempre più memoria.

Un esempio di perdita di memoria è quando il browser inizia a rallentare dopo una lunga sessione di lavoro con l'applicazione.

Puoi utilizzare gli strumenti per sviluppatori di Chrome per rilevare perdite di memoria nella tua applicazione. Lo strumento registra la sequenza temporale nella scheda delle prestazioni. Molte perdite di memoria si verificano a seguito della rimozione di elementi DOM. Il Garbage Collector rilascerà memoria solo quando tutte le variabili che fanno riferimento a questi elementi sono fuori ambito.

Strumenti come Lighthouse, Google PageSpeed ​​Insights e Chrome possono aiutarti a rilevare i problemi. Lighthouse verifica la presenza di problemi di accessibilità, prestazioni e SEO. Google PageSpeed ​​può aiutarti a ottimizzare JavaScript per migliorare le prestazioni della tua applicazione.

Il browser Chrome fornisce una funzione Strumenti per sviluppatori che puoi attivare facendo clic su F12 sulla parola chiave. È possibile utilizzare la sua analisi delle prestazioni per accendere e spegnere la rete e controllare il consumo della CPU. Controlla anche altre metriche per scoprire problemi che interessano il tuo sito web.

Come sviluppatore web, lavorerai molto nel tuo browser web. La maggior parte dei browser è dotata di una suite di strumenti per sviluppatori per aiutarti a risolvere i problemi del sito web. La funzione Strumenti per sviluppatori di Google Chrome ha molte funzioni per assisterti.