La tecnica di Lazy Loading può essere attuata tramite due diversi approcci: Ajax Lazy Loading (ALL) e DOM Lazy Loading (DLL).
Ajax Lazy Loading (ALL)
Il primo approccio, che chiamiamo Ajax Lazy Loading (ALL) permette di scaricare un nuovo script JavaScript tramite una richiestaXmlHttpRequest e integra il codice grazie alla funzione eval() che valuta uno script a partire da una stringa.
In questo modo qualsiasi porzione di codice non espressamente inserita all'interno di una funzione o di un oggetto sarà al termine del download dello script. Le richieste possono essere fatte sia in maniera sincrona, quindi bloccando il client in attesa del nuovo script (comodo dal punto di vista dello sviluppo ma pessimo come usabilità), sia in maniera asincrona (usabile ma spesso di difficile interpretazione e realizzazione per lo sviluppatore).
Una possibile soluzione a questo secondo problema può essere quella di utilizzare una libreria di continuation trasformer che permette di effettuare richieste asincrone in maniera semplice e soprattutto senza perdersi tra decine di funzioni callback che sono fonte di preoccupazioni e di bug.
Un'ottima libreria è Narrative JavaScript alla quale cercheremo di dedicare uno spazio più approfondito in seguito.
DOM Lazy Loading
Il secondo approccio, più orientato alla modifica del DOM della pagina (che quindi chiameremo DOM Lazy Loading, DLL) garantisce il download di un nuovo script inserendo un nuovo elemento <script> all'interno dell'elemento <head> della pagina, tramite la manipolazione del DOM.
Il confronto
Le peculiarità e le differenze tra questi approcci possono essere riassunte in un questo elenco:
- entrambi gli approcci permettono di eseguire codice JavaScript (non inserito in funzioni e oggetti) appena terminato il download e di definire funzioni per un utilizzo futuro
- tramite il DLL è possibile scaricare script anche da domini differenti rispetto a quello di origine (non possibile tramite l'utilizzo dell'oggetto
XmlHttpRequest) - tramite l'ALL è possibile essere più flessibili riguardo sia alla richiesta che alla risposta ricevuta, per esempio è possibile effettuare chiamate POST passando parametri complessi o ricevere script JavaScript all'interno per esempio di richieste SOAP o XML, mentre utilizzando il DLL è obbligatorio puntare verso una specifica risorsa JS
- la cache del browser viene attivata solamente tramite DLL, quindi in caso contrario è necessario un controllo esplicito per evitare doppie richieste
Ultimi articoli JavaScript
PhantomJS, headless browser per test con JavascriptIl tool ideale per realizzare, da terminale, operazioni in remoto su... |
Creare e leggere QR Code in JavaScriptApplicazioni 'QR Code enabled' per il Web e per il mobile,... |
Jquery UI Map: web-mapping con Google Maps e jQueryUn plugin di jQuery UI per intefacciare applicaizoni Web/mobile con... |
Scrollorama e Scrolldeck, slideshow d'effetto con jQueryPlugin jQuery per ottenere Slideshow con diversi effetti di scrolling |
jCanvas, un primo semplice graficoAlla scoperta della libreria jCanvas, per semplificare il disegno e... |
Guide JavaScript
Guida Node.jsIl framework che permette di per usare V8, l'interprete JavaScript... |
Canvas, guida ai frameworkCanvas, tra gli elementi di HTML5 è forse quello di maggior impatto.... |
Guida Javascript: tecniche avanzateUna guida dal taglio pratico per approfondire la programmazione a... |
Newsletter @JavaScript
Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.
Iscriviti alla newsletter
Corsi in aula
|
|
Corso Webmaster base18 Giugno 2012 a Milano |
|
|
Corso Google AdWords Base25 Giugno 2012 a Milano |
|
|
Corso JQuery e Ajax per Webmaster03 Luglio 2012 a Milano |
|
|
Corso Google AdWords Base05 Giugno 2012 a Roma |
|
|
Corso Webmaster base11 Giugno 2012 a Roma |