Rimanda il caricamento di Javascript, per ottimizzare il tempo di caricamento
8 settembre 2013  //  By:   //  Javascript  //  No Comment   //   2739 Views

Rimandando il carico delle funzioni JavaScript che non sono chiamate all’avvio su una pagina riduce la dimensione iniziale di download e quindi la richiesta iniziale, permettendo altre risorse utili di essere scaricate in parallelo, e accelerando l’esecuzione e il tempo di rendering.

Come per i fogli di stile (CSS), è necessario scaricare lo script, analizzato, ed eseguirlo prima che il browser può cominciare a renderizzare una pagina web. Anche in questo caso, se uno script è contenuto in un file esterno che viene memorizzata nella cache, l’elaborazione di tutti gli elementi a seguito dello script viene bloccato fino a quando il browser carica il codice dal disco e lo esegue. Tuttavia, per alcuni browser, la situazione è peggiore per i fogli di stile: mentre è in elaborazione JavaScript, il browser blocca tutte le altre risorse che vengano scaricate.

Per le applicazioni AJAX-type che usano molti byte di codice JavaScript, questo può aggiungere una notevole latenza.

Per molte applicazioni ad alta intensità, la maggior parte del codice JavaScript che gestisce gli eventi avviati dall’utente, come mouse, fare clic e così via.. Tutti questi eventi user-triggered si verificano dopo che la pagina viene caricata e il download viene attivato. Pertanto, gran parte del ritardo nel “percorso critico” potrebbero essere evitati rinviando il caricamento del JavaScript fino a quando è effettivamente necessario. Mentre questo metodo di carico non riduce il carico utile totale javascript, può ridurre significativamente il numero di byte necessari per caricare lo stato iniziale della pagina, e permette ai byte rimanenti di essere caricati in maniera asincorna in background.

Per utilizzare questa tecnica, si devono prima identificare tutte le funzioni JavaScript che non sono attualmente utilizzate dal documento prima dell’evento onload. Per ogni file che contiene più di 25 funzioni non richiamate, si dovranno spostare tutte le funzioni in file JS esterno separato. Questo potrebbe richiedere un po’ di ricostruzione del codice per aggirare le dipendenze tra i file. (Per i file che contengono meno di 25 funzioni non richiamate, non ne vale la pena di fare la ricostruzione.)

Poi, si inserisce un listener di eventi JavaScript a capo del documento contenente che costringe il file esterno ad essere caricato dopo l’evento onload. Si può fare questo con uno dei soliti mezzi di scripting, ma si consiglia un semplice elemento DOM script (per evitare problemi di politica dello stesso dominio di cross-browser).

Ecco un esempio (dove “deferredfunctions.js” contiene le funzioni da pigramente caricati):

Fonte

About the Author :

BI CONSULTING. Studente di Ingegneria Informatica, Sistemista Linux e appassionato di tutto ciò che sia tecnologico ma soprattutto Open Source. Distro: Debian e Arch LInux. Smartphone: Nexus / Lg G2 Buona Lettura  Visualizza il profilo su Linkedln

Leave a reply