[JavaScript] jQueryをローカルストレージに保存して高速化

サイトに来る度にjQueryを読み込み直すんじゃなくて、ローカルストレージに登録したほうが早いんじゃないかって思ったのでやってみた。

■Chromeの場合
読み込む場合にかかった時間 125ms～200ms
ローカルストレージから読み込む場合 25ms～40ms

■iPhoneの場合
読み込み
Wi-Fi 280ms～400ms
電話回線 800ms～1200ms
ローカルストレージ
130ms～200ms

通信環境によって、色々変わりそうだけど、iPhoneだと大きく違う！
早いぜっ！

アプリケーションキャッシュにすればもしかして全部解決なのかも…

--add [2012/8/24]
スマートフォン向けのサイトなら、jQueryをよみこむのはXMLHttpRequestじゃなくて、scriptタグを生成する方がよさそう。その場合はscript要素のonLoadイベントで読み込み後の処理を開始するといいはず。(試してない)
参考：[JavaScript] [高速化] JSファイルの非同期読み込み。遅延ロードっていうのか？

//jQueryを読み込んだ後に最初に呼ぶ関数
function start(){
 //jQuery読み込み後の処理
}

//ローカルストレージからjQueryを読み込む
var jQ = window.localStorage.getItem('jQuery');

if(jQ === null){
 //ローカルストレージにない場合
 //jQueryファイルを読み込む
 loadJQuery();
}else{
 //ローカルストレージにある場合

 try{
  //ローカルストレージに保存してある文字列をJavaScriptとして処理
  eval(jQ);

  if(typeof jQuery === 'undefined'){
   //ローカルストレージのjQueryがうまく動かなかった場合は読み込み直し
   throw new Exception();
  }
  
  start();
 }catch (e){
  //evalでエラーが出た場合は読み込み直し
  loadJQuery();
 }
}

//jQueryを読み込んでstart関数を呼ぶ
function loadJQuery(){
 var xmlhttp = new XMLHttpRequest();

 xmlhttp.open("GET", 'jQueryファイルへのパス', true);
 xmlhttp.onreadystatechange = function(){
  
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200){
   
   //読み込み成功時
   var str =  xmlhttp.responseText;
   
   //文字列として読み込んでローカルストレージに保存
   window.localStorage.setItem('jQuery', str);
   //JavaScriptとして処理
   eval(str);
   start();
   
  }else if(xmlhttp.readyState === 4 && xmlhttp.status !== 200){
   //読み込み失敗時
  }
 };
 
 xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");
 xmlhttp.send();
}