Google AJAX Library: differenze tra jsapi e chiamata diretta

Da molto tempo, in ogni mio progetto, utilizzo la Google AJAX Library. Questo fantastico servizio consente di richiamare jQuery, Prototype, jQueryUI ecc… direttamente dai server di Google con un notevole risparmio di banda, spazio e aumento della sicurezza. Vi consiglio una lettura interessante direttamente dal sito ufficiale!

Per utilizzare questo servizio esistono due modalità: la chiamata tramite jsapi o tramite il classico richiamo “script”

Oggi ho dedicato 5 minuti per un semplice confronto delle prestazioni ottenute con i due metodi. E il risultato è stato veramente interessante!
Ho creato una pagina html completamente vuota, solo head e body con i richiami alle tre librerie che utilizzo quotidianamente: jquery, jqueryui e swfobject.

Sono infatti abituato ad utilizzare il metodo seguente (JSAPI):

<script src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
  google.load("jquery", "1.4.2");
  google.load("jqueryui", "1.8.0");
  google.load("swfobject","2.2");
</script>
</script>

Grazie al nostro Firebug ho ottenuto questi dati (vi allego uno screenshot):

Caricamento tramite JSAPI

jsapi

Dimensione della pagina: 84.2 KB
Tempo di caricamento: 795ms

Fatto questo ho provato a modificare il richiamo alle librerie con il classico richiamo “script” come segue:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

Ho svuotato la cache e ricaricato il tutto. Questi sono i miei risultati ottenuti:

Caricamento tramite classico richiamo script

script diretto

Dimensione della pagina: 76.9 KB
Tempo di caricamento: 462ms

La differenza secondo me è notevole!
Il caricamento classico è infatti più leggero di 7.3 KB e la chiamata totale è più veloce di 333ms.
Dobbiamo infatti considerare che queste differenze sembrano minime, ma moltiplicate per “n” visitatori possono fare la differenza.

Ovviamente dobbiamo anche considerare che non tutte le chiamate avranno lo stesso peso e tempo grazie alla cache, ma posso comunque dire che da oggi utilizzerò di sicuro il classico richiamo script!

Approfondisci

jQuery: prevenire il comportamento di default

Se usate jQuery avrete di sicuro utilizzato spesso la sintassi:

<a href="#/" id="mylink">click me</a>
$('#mylink').click(function() {
  // azione da fare al click del link con id 'mylink'
  alert('clicked!!');
});

Al click del link con id mylink verrà visualizzato un semplice alert.
Come vedrete però nella barra degli indirizzi verrà visualizzato il “#/”, e non è elegante.

Con jQuery abbiamo la possibilità di prevenire le azioni di default dei nostri elementi, nel nostro caso il link. Sarà sufficiente scrivere:

$('#mylink').click(function(event) {
  // Prevent default
  event.preventDefault();
  // azione da fare al click del link con id 'mylink'
  alert('clicked!!');
});

Attenzione: ho passato come parametro della funzione l’event per poterlo richiamare.

Approfondisci

jQuery – animate() e Internet Explorer 8 (IE8)

Attenzione, se state utilizzando la funzione animate() di jQuery in accoppiata ad effetti sul padding potreste trovare delle difficoltà con Internet Explorer (dai miei test IE7 e IE8).

Firefox, Chrome, Safari accettano la sintassi:

$('#mydiv').animate({
  padding: '5px 5px 15px 0'
});

Internet Explorer, ovviamente no :) Utilizzate quindi la sintassi:

$('#mydiv').animate({
  paddingTop: '5px',
  paddingRight: '5px',
  paddingBottom: '15px',
  paddingLeft : '0',
});

Approfondisci