Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Mondo Javascript

Pagine:

RSS

Ottimizzare le prestazioni in applicazioni ricche di Javascript

di: Alvin Laini 26 Novembre 2007

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:

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:

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:

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?