web-dev-qa-db-ja.com

CSSとJavaScriptを保存するためにHTML5ローカルストレージを利用することは現実的ですか

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

例（疑似コード）：

 var load_from_cdn = true; 
 if（ローカルストレージを検出）
 {
 if（cssのキャッシュ、jsが見つかりました）
 {
ローカルストレージキャッシュをロードします
 load_from_cdn = false; 
} 
} 
 if（load_from_cdn）
 {
ドキュメント。書き込み（ '<スクリプト> ...'）; 
}

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

私はブラウザのキャッシュを知っていますが、ヘッダーアクセスチェックがまだあります、
私はHTTPアクセスがない方が良いと想定しています（私の思考で）

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

html5optimization
23
ajreal

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

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

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

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

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

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

ありがとう

11
Morgan Cheng

ブラウザーは既にこれを行っていませんか？

33
Bryan Boettcher

ポイントは何ですか？

クライアント側キャッシングと呼ばれる確立された手法はすでに存在します。この場合、HTML5ローカルストレージは何をもたらしますか？

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

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

最初の編集への応答（2番目の編集はトピック外です）：

私はブラウザのキャッシュを知っています、それでもいくつかのヘッダーアクセスチェックがあります

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

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

  • _Last-Modified_は、コンテンツがいつ変更されたかを指定します。
  • Expiresはコンテンツが変更されたかどうかブラウザーがサーバーに要求する必要がある場合を指定します。

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

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

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

たとえば、Stack Overflowのホームページにアクセスすると、次のようなスクリーンショットが表示されます。

A screenshot of Stack Overflow timeline in Chrome shows 15 files, 3 being requested, 12 being served from cache directly with no requests to remote servers

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

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

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

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

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

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

7
jfriend00

ホイールを再発明する代わりに、HTML5オフライン機能を使用するだけです。 http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

5
ZippyV

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

ブラウザのキャッシュと手動のHTML5ソリューションのベンチマークを常に行うことができます。しかし、私の賭けは、ネイティブキャッシングがパンツを打ち負かそうとしていることです。

2
cczona

LocalStorageの使用は高速です。私のテストは示した

  • CDNからjQueryをロードする：Chrome268ms、FireFox：200ms
  • LocalStorageからjQueryをロードする：Chrome47ms、FireFox14ms

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');
});
2
select