HTML5ローカルストレージを使用してCSSとJavaScriptを保存するのは現実的ですか

考えは、頻繁にアクセスされるCSSとJavaScriptを保存するためにHTML5ローカルストレージを利用することです。

例（擬似コード）：

var load_from_cdn = true;
if（ローカルストレージを検出）  
{
  if（cssのキャッシュ、jsが見つかった）
  {
     ローカルストレージキャッシュをロードする
     load_from_cdn = false;
  }
}
if（load_from_cdn）
{
   document.write（ '<script> ...'）;
}

これは可能ですか、現実的ですか？

私はブラウザのキャッシュを認識していますが、まだいくつかのヘッダーアクセスチェックがあり
ますが、HTTPアクセスの方が良いと仮定しています（私の考えでは）

PS：ローカルストレージはキーと値のペアのみをサポートしているようですが、誰かがそれを証明できますか？
（いくつかの例に最適）

JSとCSSを保存するためにローカルストレージを使用することは絶対に問題ありません。ただし、ローカルストレージにはドメインごとに5Mの制限があります。この戦略を再考する必要があるかもしれません。

デスクトップWebの場合、デフォルトのブラウザーキャッシュを活用してトリックを実行できます。JSおよびCSS HTTP応答をキャッシュ可能に設定するだけです。シンプルで簡単です。

モバイルWebの場合、待ち時間は長くなります。そのため、HTTP要求を減らすことが重要です。したがって、外部URLにJSとCSSを含めることが最適です。JSとCSSをインラインにする方がはるかに良いでしょう。これにより、HTTPリクエストは減りますが、HTMLコンテンツが肥大化しました。じゃあ何？あなたが言ったように、ローカルストレージを使用してください！

あるブラウザが初めてサイトにアクセスすると、JSとCSSがインラインに配置されます。JSにはさらに2つのジョブがあります。1）JSとCSSをローカルストレージに保存します。2）JSとCSSがローカルストレージにあることを示すフラグを設定します。

ブラウザーが2回目にサイトにアクセスすると、サーバーはCookieを取得し、ブラウザーが既にJSとCSSに関連していることを知っています。したがって、レンダリングHTMLには、ローカルストレージからJSとCSSを読み取り、DOMツリーに挿入するインラインJSがあります。

これは、bing.comモバイルバージョンの作成方法の基本的な考え方です。JS＆CSSのバージョン管理を実稼働環境に実装する際に考慮する必要がある場合があります。

ありがとう

ブラウザはすでにこれをあなたのために行っていないでしょうか？

ポイントは何ですか？

クライアント側のキャッシュと呼ばれる確立された手法が既にあります。この場合、HTML5ローカルストレージは何のキャッシングが失われますか？

キャッシュを効果的に使用できないように、JavaScriptコードのチャンクを動的にロードする必要のある奇妙なアプリケーションがありますが、これは非常にまれなケースです。

また、別のことに注意してください。ブラウザにはキャッシュに関する特定のポリシーがあり、ほとんどのブラウザはキャッシュの管理に非常に優れています（古いコンテンツのみを削除するなど）。自家製のキャッシュを実装することにより、ブラウザーがそれを正しく管理できないようにします。それだけで批判される可能性があるだけでなく、遅かれ早かれあなたを傷つけることにもなります。例：Webアプリケーションのユーザーがバグを報告している場合、多くの場合、ユーザーにキャッシュをクリアするように依頼して回答します。キャッシュをクリアしてもウェブアプリの問題は解決されないため、あなたがケースで何を尋ねるかはわかりません。

最初の編集（2番目の編集はトピック外）に応じて：

ブラウザーのキャッシュを認識していますが、ヘッダーアクセスチェックがまだいくつかあります

ブラウザのキャッシュについての理解が不足しているようです。そのため、独自の自家製キャッシングメカニズムの実装を開始する前に、まずその仕組みを理解することが不可欠です。既存のホイールを十分に理解し、それらを使用しない正当な理由がある場合にのみ、独自のホイールを再発明してください。「ホイールを再発明し、後悔しない」という質問に対する私の回答のポイント1を参照してください。

HTTPを介してデータを提供する場合、キャッシュに関連するいくつかのヘッダーを指定できます。

• Last-Modified コンテンツがいつ変更されたかを指定します。
• Expiresコンテンツが変更されたかどうかをブラウザがサーバーに尋ねる必要がある時を指定します。

これらの2つのヘッダーにより、ブラウザは次のことができます。

• コンテンツを何度もダウンロードしないでください。場合はLast-Modified、最後の月に設定され、コンテンツが既に数時間前に今日をダウンロードして、それを再度ダウンロードする必要はありません。
• ファイルが最後に変更された日付のクエリを避けます。場合はExpiresキャッシュエンティティの5月5日である^番目、あなたが任意のGETリクエストを発行する必要はありませんが、2014年でもない2011年に、また2012年または2013年に、あなたはキャッシュが最新であることを知っているからです。

2番目はCDNに不可欠です。Google がStack Overflowの訪問者にJQueryを提供する場合、cdn.sstatic.netまたはStack Overflowで使用される画像またはスタイルシートを提供する場合、ブラウザが毎回新しいバージョンをクエリすることを望みません。代わりに、これらのファイルを一度提供し、有効期限を十分に長いものに設定します。これですべてです。

たとえば、Stack Overflowのホームページにアクセスしたときに何が起こっているかのスクリーンショットを次に示します。

提供するファイルは15個あります。しかし、これらの304 Not Modified応答はすべてどこにありますか？変更されたコンテンツのリクエストは3つのみです。それ以外の場合、ブラウザはサーバーにリクエストを送信せずにキャッシュバージョンを使用します。

最後に、独自のキャッシュメカニズムを実装する前に、よく考え直す必要があります。特に、これが役立つ可能性のある良いシナリオを見つける必要があります。私の答えの冒頭で述べたように、私は1つしか見つけることができません：あなたはJavaScriptのチャンクを提供し、それらを使用して、OMG、...を見つけますeval()。しかし、この場合、次のいずれかのより良いアプローチがあると確信しています。

• 標準キャッシュ技術を使用してより効果的、または
• メンテナンスが簡単。

クライアント側のローカルキャッシュは、HTML5ローカルストレージを使用するよりも最適化する必要があります。JavaScriptとCSSが外部のキャッシュ可能なファイルにあることを確認してください。ローカルストレージから抽出して自分で実行しようとするよりも、ブラウザキャッシュを介してページをはるかに速く読み込む必要があります。

さらに、ページのJavaScriptの実行を実際に開始してHTML5ローカルストレージからリソースを取得する前に、ページの読み込みが開始されると、ブラウザーは外部リソースの読み込みを開始できます。

さらに、HTML5ローカルストレージから読み込むには、とにかくページにコードが必要なので、すべてのJSを1つの外部のキャッシュ可能なJSファイルに入れてください。

車輪を再発明する代わりに、HTML5オフライン機能を使用してください：http : //www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

Googleのコードライブラリのようなコンテンツ配信ネットワーク（CDN）を使用すると、パフォーマンスが大幅に向上します。思慮深く計画された、あなたのJSとCSSの大部分は、あなたのサイトに初めてアクセスする前に、すべての訪問者のキャッシュにあるべきです。残りを縮小します。

ブラウザキャッシュと手動ロールHTML5ソリューションのベンチマークをいつでも行うことができます。しかし、私の賭けは、ネイティブのキャッシングがそれを打ち負かすだろうということです。

localStorageの使用は高速です（er）！私のテストは示した

• CDNからのjQueryの読み込み：Chrome 268ms、FireFox：200ms
• localStorageからjQueryをロード：Chrome 47ms、FireFox 14ms

HTTPリクエストを保存すると、すでに速度が大幅に向上していると思います。ここの誰もが反対を確信しているようですので、間違っていることを証明してください。

結果をテストする場合は、localStorageにスクリプトをキャッシュする小さなライブラリを作成しました。Github https://github.com/webpgr/cached-webpgr.jsで確認してくださいか、以下の例からコピーして。

完全なライブラリ：

function _cacheScript(c,d,e){var a=new XMLHttpRequest;a.onreadystatechange=function(){4==a.readyState&&(200==a.status?localStorage.setItem(c,JSON.stringify({content:a.responseText,version:d})):console.warn("error loading "+e))};a.open("GET",e,!0);a.send()}function _loadScript(c,d,e,a){var b=document.createElement("script");b.readyState?b.onreadystatechange=function(){if("loaded"==b.readyState||"complete"==b.readyState)b.onreadystatechange=null,_cacheScript(d,e,c),a&&a()}:b.onload=function(){_cacheScript(d,e,c);a&&a()};b.setAttribute("src",c);document.getElementsByTagName("head")[0].appendChild(b)}function _injectScript(c,d,e,a){var b=document.createElement("script");b.type="text/javascript";c=JSON.parse(c);var f=document.createTextNode(c.content);b.appendChild(f);document.getElementsByTagName("head")[0].appendChild(b);c.version!=e&&localStorage.removeItem(d);a&&a()}function requireScript(c,d,e,a){var b=localStorage.getItem(c);null==b?_loadScript(e,c,d,a):_injectScript(b,c,d,a)};

ライブラリを呼び出す

requireScript('jquery', '1.11.2', 'http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js', function(){
    requireScript('examplejs', '0.0.3', 'example.js');
});