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 – 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

Le sessioni in PHP 5

Le sessioni in PHP ci consentono di trasferire informazioni da una pagina ad un’altra.
Il classico esempio potrebbe essere il caso di un’area riservata alla quale si accede tramite un form di login. Senza l’ausilio delle sessioni (e in particolare dei cookies che esse utilizzano) sarebbe difficile, oltre che strutturalmente scorretto, ricordare il login dell’utente una volta che chiude il browser oppure quando passa ad una pagina successiva.

Nella nostra pagina di login dove è presente il form per l’inserimento delle credenziali, come primissima cosa diciamo al server di iniziare una nuova sessione:

<?php session_start() ?>
/* qui ci sarà il form */

La pagina, una volta inviati i dati dal form, dovrà controllare che le credenziali siano corrette. Se lo sono possiamo salvarci dei dati grazie alla superglobale $_SESSION in questo modo:

<?php
     // salvo l'id utente
     $_SESSION['id_utente'] = $id_utente;
?>

Una volta che abbiamo salvato il nostro dato, possiamo utilizzarlo nelle pagine che seguiranno (come ad esempio una pagina della scheda di un documento riservato) in questo modo:

<?php
     session_start();
 
     if(isset($_SESSION['id_utente'])){
          // l'utente è loggato
     } else{
          die('Area ad accesso riservato');
     }
?>

Come vedete è sempre necessario inizializzare la sessione con session_start().
La primissima cosa che potrebbe venirci in mente è quella di salvarci in un’altra variabile di sessione (cookie) la password dell’utente criptata, in modo tale da effettuare il controllo della coppia id_utente – password nel nostro database.

Per concludere vediamo ora come si chiude una sessione, ad esempio per la classica azione di logout di un utente:

<?php
     session_start();
     $_SESSION = array(); // svuoto la superglobale
     session_destroy();          
?>

Attenzione
Una volta settata una variabile di sessione (cookie) è necessario eseguire un header(‘Location’) per fare in modo che la pagina stessa riconosca il cookie settato.
Ad esempio, se abbiamo il form di login contenuto nella pagina area_riservata.php e vogliamo fare in modo che, se l’utente è loggato, visualizzi un elenco di documenti, altrimenti visualizzi il form, dobbiamo fare in questo modo:

<?php
     session_start();     
 
     if($_POST['azione'] == 'invia_form'){
          // salvo l'id utente
          $_SESSION['id_utente'] = $id_utente;
          header('Location /area_riservata.php');
          exit;
     }
 
     if(isset($_SESSION['id_utente'])){
          // l'utente è loggato, visualizzo elenco doc
     } else{
          // l'utente non è loggato, visualizzo il form di login
     }
?>

Approfondisci