[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ファイルの非同期読み込み。遅延ロードっていうのか？

view plainprint?

1. //jQueryを読み込んだ後に最初に呼ぶ関数  
2. function start(){  
3.  //jQuery読み込み後の処理  
4. }  
5.   
6. //ローカルストレージからjQueryを読み込む  
7. var jQ = window.localStorage.getItem('jQuery');  
8.   
9. if(jQ === null){  
10.  //ローカルストレージにない場合  
11.  //jQueryファイルを読み込む  
12.  loadJQuery();  
13. }else{  
14.  //ローカルストレージにある場合  
15.   
16.  try{  
17.   //ローカルストレージに保存してある文字列をJavaScriptとして処理  
18.   eval(jQ);  
19.   
20.   if(typeof jQuery === 'undefined'){  
21.    //ローカルストレージのjQueryがうまく動かなかった場合は読み込み直し  
22.    throw new Exception();  
23.   }  
24.     
25.   start();  
26.  }catch (e){  
27.   //evalでエラーが出た場合は読み込み直し  
28.   loadJQuery();  
29.  }  
30. }  
31.   
32. //jQueryを読み込んでstart関数を呼ぶ  
33. function loadJQuery(){  
34.  var xmlhttp = new XMLHttpRequest();  
35.   
36.  xmlhttp.open("GET", 'jQueryファイルへのパス', true);  
37.  xmlhttp.onreadystatechange = function(){  
38.     
39.   if(xmlhttp.readyState === 4 && xmlhttp.status === 200){  
40.      
41.    //読み込み成功時  
42.    var str =  xmlhttp.responseText;  
43.      
44.    //文字列として読み込んでローカルストレージに保存  
45.    window.localStorage.setItem('jQuery', str);  
46.    //JavaScriptとして処理  
47.    eval(str);  
48.    start();  
49.      
50.   }else if(xmlhttp.readyState === 4 && xmlhttp.status !== 200){  
51.    //読み込み失敗時  
52.   }  
53.  };  
54.    
55.  xmlhttp.setRequestHeader("X-Requested-With", "XMLHttpRequest");  
56.  xmlhttp.send();  
57. }  

//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();
}