on Web 2.0

Lazy loading, caricare le funzioni Javascript quando servono

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…

scrivi un commento

Commento

Ricevi un avviso se ci sono nuovi commenti. Oppure iscriviti senza commentare.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Webmention

  • TolenoDesign Blog maggio 23, 2011

    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… (dynamick.it)

  • Insel der Engel’ maggio 23, 2011

    selettiva degli ActiveX in Internet Explorer WCAG 2.0 per un web accessibile Bordi perfetti sulle immagini Come implementare la copia del testo usando Javascript + Flash (cross browser) The seven rules of pragmatic progressive enhancementLazy loading, caricare le funzioni Javascript quando servonoProcessing.js: Port of the Processing language to JavaScript and Canvas Processing.js: Javascript e Canvas alla massima potenza Compression using Canvas and PNG Con JavaFX Sun punta a fare concorrenza ad AIR e Silverlight