Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Mondo Javascript

Pagine:

RSS

Ottimizzazione: Javascript e performance del sito

di: Filippo Buratti 06 Settembre 2010

Anche questa pratica produce ottimi risultati, arrivando in alcuni casi a una riduzione del peso complessivo vicina al 50%. I più diffusi framework Javascript e i relativi plugin sono spesso disponibili per il download oltre che in formato sorgente anche in versione già minimizzata pronta per l'uso.

Nelle tabelline della figura 2, ottenute attraverso l'analisi del pannello risorse di Firebug, è possibile verificare i risultati delle diverse modalità di compressione su una stessa pagina in cui vengono inclusi il framework Prototype e alcuni componenti della libreria Scriptaculous.

Figura 2 - Verifica compressione con Firebug

Concatenare File Javascript e CSS

Il browser di default non può aprire più di 2 o 4 connessioni simultanee verso il server nel download dei vari file inclusi in un documento: inoltre il browser per questioni procedurali, allo scopo di evitare conflitti tra script interdipendenti, può caricare un solo file Javascript alla volta, secondo l'ordine di inclusione nella pagina. Come già detto la riduzione del numero di richieste HTTP è una pratica caldamente incoraggiata: può essere allora molto proficuo unire i vari file Javascript utilizzati nella nostra applicazione in un unico monolitico file: e lo stesso vale per i vari fogli di stile CSS. Come per la minimizzazione, la portabilità del codice viene fortemente penalizzata, quindi anche in questo caso dovremo predisporre una versione di sviluppo e una di produzione.

Non sempre concatenare i file è la scelta giusta: se ad esempio numerosi script vengono utilizzati solo in alcune determinate pagine, può essere utile differenziarne il caricamento, onde evitare di appesantire inutilmente il resto del sito con larghe porzioni di codice Javascript inutilizzato.

Concatenare e comprimere i file con PHP

Gzoutput è un classe in PHP 4/5 (disponibile nella versione più aggiornata su PHP Classes) scritta da Andrea Giammarchi che in un colpo solo permette di attuare le tecniche descritte nelle precedenti sezioni: tramite la configurazione di un piccolo script PHP è possibile comprimere con gzip e concatenare e in un singolo file i nostri file Javascript e CSS senza alterarne la struttura. Non solo, i dati ottenuti possono essere memorizzati dallo script in una cartella sul server per evitare la rielaborazione nelle richieste successive, ed è possibile eliminare automaticamente dal codice spazi vuoti e commenti (con l'utilizzo di una classe aggiuntiva). Gzoutput dispone di numerosi metodi pubblici e opzioni avanzate che consentono diverse modalità di utilizzo, illustrate accuratamente nella documentazione: la via di implementazione più semplice e veloce prevede l'inclusione nel documento di un file che chiameremo "bootstrap.php" da collocare nella stessa directory dei file da trattare.

<html>
<head>
<title>Gzoutput</title>
<script type="text/javascript" src="js/bootstrap.php"></script>
</head>
<body>
<h1>Gzoutput: esempio di utilizzo</h1>
</body>
</html>

Il file "bootstrap.php" è molto semplice, essendo costituito dall'include con il percorso alla classe e da un array degli script da utilizzare (in questo caso, gli stessi dei precedenti esempi di codice), passato come primo argomento al metodo pubblico createFromList() di Gzoutput; nel secondo argomento è necessario specificare il tipo di file, text/javascript, o text/css, se vogliamo concatenare diversi fogli di stile, predisponendo per essi un apposito "bootstrap.php" nella cartella in cui risiedono i CSS.

  <?php
  require("../include/GzOutput.class5.php");
  GzOutput::createFromList(array("prototype.js", "scriptaculous.js", "effects.js", "dragdrop.js", "controls.js"), 'text/javascript');
  ?>

Come visibile nella figura 3, la riduzione di peso determinata da Gzoutput è analoga a quella ottenuta con la compressione gzip attraverso l'uso del file htaccess negli esempi precedenti.

Figura 3 - Compressione Gzip con Gzoutput e PHP

Tra le alternative a Gzoutput, sempre utilizzando il linguaggio server PHP, sono da segnalare: Smartoptimizer, PHPSprocket (il porting di una gemma di Ruby) e Minify.

La seconda parte di questa guida di ottimizzazione sarà online la prossima settimana; vedremo l'utilizzo di due plugin (con Jquery e Prototype) per il benchmark degli script e numerosi esempi per migliorare l'efficienza e la qualità del nostro codice. Alla prossima!

Pagina successiva

Pagine: