Alcuni test effettuati da Google e Bing, hanno evidenziato come sia possibile beneficiare, in sostituzione della cache del browser, il local storage in funzione di ottenere performances migliori soprattutto in ambito mobile.

Abbiamo già illustrato il funzionamento del localStorage in un precedente script: https://www.html5italia.com/script/43/Salvare-Dati-Client-Web-Storage.aspx ma fortunatamente esiste una libreria javascript, già pronta, che supporta il localStorage come repository/cache per gli script: Basket.js.

Questa libreria consente di scaricare inizialmente gli script mediante xmlHttpRequest (XHR), memorizzarli nel localStorage e iniettarli nel DOM per il successivo utilizzo. Le richieste successive potranno quindi beneficiare delle maggiori performance per reperire il codice Javascript dal localStorage anzichè dalla cache del browser.

L'utilizzo è dimostrato nello script seguente:

//gestione di un singolo script
//1) Testa l'esistenza dello script nella cache (localStorage)
//2a) Se esiste, viene iniettato nel DOM
//2b) Se non esiste, viene scaricato (XHR), memorizzato e iniettato nel DOM
basket.require({ url: 'myScript.js' });

//script multipli (caricati in ordine casuale e in maniera asincrona)
basket.require(
  { url: 'myScript1.js' },
  { url: 'myScript2.js' },
  { url: 'myScript3.js' });
);

//script multipli (con ordine di priorità)
basket.require({ url: 'myScript1a.js' })
  .then(function() {
    basket.require({ url: 'myScript1b.js' });
  });
})

Esistono molteplici metodi per la gestione degli script memorizzati, come ad esempio l'impostazione della scadenza, la rimozione dalla cache, ma per maggiori dettagli rimandiamo alla home page del progetto: http://addyosmani.github.com/basket.js/