Good Ideas

Lazy loading, caricare le funzioni Javascript quando servono

Posted by:

|

On:

|

Stamattina mi sono soffermato a leggere un articolo su Digital Web Magazine che tratta del "Lazy Loading" un sistema intelligente per ottimizzare le performance di caricamento di una pagina web. In sostanza, al posto di caricare tutte le funzioni javascript al caricamento della pagina web, le facciamo caricare al bisogno, tramite AJAX.

lazy load

In informatica, il pattern "Lazy Load" corrisponde all’implementazione del design pattern chiamato Proxy. L’obiettivo è di evitare il caricamento di un oggetto finchè non sia assolutamente indispensabile e solo allora sarà necessario investire risorse per caricarlo. Nel caso del JavaScript, una applicazione web generamente ha bisogno di un set di funzioni che vengono chiamate progressivamente durante l’interazione con l’utente. Applicare il Lazy Load in questo caso significa creare delle funzioni "vuote", senza il loro codice che verrà caricato al momento della loro prima chiamata. Definiamo questa tecnica come Ghost Pattern.

Il Ghost Pattern prevede di fornire un oggetto con tutti i suoi metodi pubblici ma saranno vuoti, senza codice al loro interno con la sola chiamata alla nostra funzione di "lazy load" che si occuperà di caricare il vero oggetto andandolo a sostituire con la funzione fantasma.
Se verrà chiamata nuovamente la stessa funzione, verrà scatenato il vero oggetto, già caricato precedentemente.

Tutto questo solo per darvi un’idea della logica di questo design pattern. Per vedere nel dettaglio il codice potete trovarlo direttamente su questo articolo. Per chi usa JQuery come me, vi segnalo il plugin "Plugin" (strano nome, eh?) che implementa in toto il Lazy Loading, ma questo bisogna caricarlo fin da subito, eheheh…

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *