La maggior parte delle applicazioni web 2.0 contengono molto più codice Javascript delle normali pagine web. Il codice Javascript di un'applicazione Ajax, tenendo conto di tutti i file che vengono richiamati, può facilmente superare i 300/400 Kb ed è quindi molto importante fare in modo che la sua manutenzione sia il più semplice possibile, avendo anche un occhio di riguardo per la velocità di caricamento da parte del browser e quindi per le prestazioni.
In questo articolo verranno presentate le seguenti semplici tecniche utili nell'ottimizzazione di codice Javascript:
- come unificare tutte le librerie Javascript in un unico file;
- migliorare i tempi di caricamento comprimendo "on demand" la nostra libreria Javascript con Gzip attraverso PHP;
- implementazione della sintassi "version" per gestire le varie release del software eliminando il fastidioso problema di pagine inesistenti dovute alla cache del browser.
Unificazione di tutti i file Javascript in un'unica libreria
Con l'avvento dei framework destinati alla gestione di Ajax (ma non solo) siamo a volte costretti ad implementare nelle nostre applicazioni sempre più librerie Javascript che ci permettano di accedere a determinate funzioni o di implementare effetti visivi accattivanti.
Se da un lato tutto ciò semplifica il nostro lavoro, dall'altro rende la vita dura al motore di rendering del browser che si trova a dover gestire una moltitudine di codice Javascript segmentato in più librerie, impiegando così un tempo non trascurabile per riuscire a scaricare tutti questi file.
Un modo per minimizzare il tempo di caricamento c'è e, non è niente di trascendentale, basta unificare tutto il codice Javascript in un unico file!
È vero che il motore di rendering del browser si troverà a dover gestire la stessa quantità di codice, ma sarà eseguita una sola richiesta http per scaricare tutto quello di cui abbiamo bisogno; questo semplice stratagemma è molto utile per migliorare drasticamente le prestazioni legate al caricamento iniziale di applicazioni Ajax.
Una volta creata la vostra libreria contenente tutto il codice necessario, basterà importarla nella vostra pagina HTML in questo modo:
<script src="libreria_completa.js"></script>
Comprimere la vostra libreria Javascript "on demand"
In passato bisognava scegliere tra dimensioni ridotte o codice facilmente mantenibile e leggibile.
La maggior parte dei programmatori sceglieva di minimizzare il codice limitando o eliminando del tutto i commenti o gli spazi a discapito della leggibilità, con il risultato di scrivere del codice difficilmente estendibile e modificabile.
Oggi, utilizzando la compressione Gzip, si può fare a meno di dover affidarsi ad un simile compromesso; potete scrivere la vostra applicazione utilizzando tutti i commenti che volete evitando di preoccuparvi delle dimensioni della vostra libreria e pensando solo a scrivere del buon codice, estendibile e leggibile.
Quasi tutti i browser ormai supportano la compressione Gzip e con PHP basterà usare la funzione ob_gzhandler() che invierà un flusso di dati compresso verso il browser il quale controllerà l'header del file richiesto esaminando il parametro "Content-Encoding" che sarà impostato su gzip o deflate.
È incredibile come questo tipo di compressione riduca significativamente le dimensioni dei file; infatti, una libreria Javascript che pesa 30kb dopo la compressione diventerà all'incirca 8kb.
Ma come fare a mettere in pratica tutto ciò? Seguiamo i punti sotto elencati:
1. Aggiungete al vostro file .js il suffisso .php. Ad esempio, se il vostro file si chiamava libreria.js ora si chiamerà libreria.js.php.
2. Importate la libreria nel vostro progetto web in questo modo:
<script src='libreria.js.php' ></script>
3. Ora aprite il vostro file libreria.js.php ed inserite in testa al file il seguente codice:
<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/javascript"); ?>
4. Sempre nel medesimo file in coda inserite:
<?php if(extension_loaded('zlib')){ob_end_flush();}?>
Il codice che abbiamo inserito in testa nel nostro file controllerà prima se sul nostro server, dove è installato PHP, sia presente il modulo "zlib" che è necessario per poter eseguire la compressione e, se tutto è andato a buon fine, gestirà l'output di tipo Javascript che verrà salvato in un buffer e codificato attraverso gzip; una volta terminato l'output, il contenuto del buffer verrà inviato al browser ed infine il buffer verrà svuotato.
Il gioco è fatto: controllate che tutto funzioni come dovrebbe e che il motore di php esegua la compressione "on demand" del file.
In ogni caso, ricordo che i più noti framework Javascript offrono anche versioni compresse degli stessi.
Un recente post apparso sul blog di Max Kiesler, poi, elenca un'utile raccolta di tecniche, risorse e strumenti per la compressione di file Javascript.
Aggiornare le vostre librerie Javascript in modo sicuro
L'ultima tecnica relativa al miglioramento delle applicazioni ricche di Javascript riguarda le interazioni con la cache del browser.
Nel passato questo bug veniva spesso incontrato durante i cicli di revisione delle applicazioni Ajax e obbligava gli utenti a sapere come cancellare la cache del browser o ad aggiornare la pagina tenendo premuto ctrl+F5 da tastiera in modo da forzare il browser a ricaricare per intero la pagina eliminando la cache.
Ma ovviamente nessuno di questi due metodi è sufficientemente affidabile o amichevole nei confronti dell'utente.
La tecnica oggi più usata per risolvere questo tipo di problema consiste nel dichiarare al browser quando interpreta la nostra libreria una versione:
<script src="libreria.js?version=2"></script>
Il browser considererà il nome del file per esteso, "libreria.js?version=2". Quindi, se creeremo una nuova versione di libreria.js, la caricheremo con il seguente nome:
<script src="libreria.js?version=3"></script>
Questo tipo di parametro non ha alcun effetto sulla corretta esecuzione del codice, ma farà in modo che il nostro browser ricarichi nuovamente il file.
Conclusioni
Queste tecniche potrebbero essere molto utili quando si è alle prese con applicazioni complesse che richiamano svariate librerie, poste magari in diverse cartelle.
A questo punto noi non dovremmo far altro che integrare in un unico file tutte le librerie necessarie (ovviamente con gli opportuni commenti e separazioni del caso), comprimere il tutto ed impostare una versione. Semplice no?
