web-dev-qa-db-ja.com

JavaScriptの圧縮とアセットのキャッシュ

何時間も検索しても良い答えが見つからないようだという考えに取り組んでいますが、

私は小さなCanvas/WebGLアプリケーションを計画しています。このアプリケーションはWebSocketを使用して、データを同期するためにゲームサーバーと通信するため、MMOタイプのサービスと考えてください。

アセットをロードするためのキューイングシステムを計画しているので、たとえば、model1とそのテクスチャを取得するように要求します。

Mthd | Data                   | q | p | s
GET  | /asset/model_1/model   | 0 | 0 | 0
GET  | /asset/model_1/texture | 0 | 0 | 0
GET  | /asset/model_1/model   | 1 | 1 | 0
GET  | /asset/model_1/texture | 1 | 1 | 0
...
GET  | /asset/model_1/model   | 5 | 5 | 0
GET  | /asset/model_1/texture | 5 | 5 | 0

キー

q = quality modifier 
p = priority lower is better
s = status `0 not started, 1 downloading, 2 complete`

だから私のクライアントはそのダウンロードキューを処理していますが、これが行われている間に別のプレーヤーが私のビューに入ってきたので、プレーヤーのモデルとテクスチャが必要なので、それらをキューに追加して、そのようになります

Mthd | Data                   | q | p | s
GET  | /asset/model_1/model   | 0 | 0 | 2
GET  | /asset/model_1/texture | 0 | 0 | 2
GET  | /asset/model_2/model   | 0 | 0 | 0
GET  | /asset/model_2/texture | 0 | 0 | 0
GET  | /asset/model_1/model   | 1 | 1 | 1
GET  | /asset/model_1/texture | 1 | 1 | 0
GET  | /asset/model_2/model   | 1 | 1 | 0
GET  | /asset/model_2/texture | 1 | 1 | 0
...
GET  | /asset/model_1/model   | 5 | 5 | 0
GET  | /asset/model_1/texture | 5 | 5 | 0
GET  | /asset/model_2/model   | 5 | 5 | 0
GET  | /asset/model_2/texture | 5 | 5 | 0

これらのファイルをブラウザーのキャッシュにキャッシュしたいので、データベースの使用とLWZなどを使用した圧縮、またはアセットをオンラインにしてappCacheを使用してロードすることに縛られています。

だから私の質問。

ブラウザが通常どおり(httpリクエスト)アセットをロードすると、レンダリングされなくなった画像はブラウザによってメモリに保持されます。

Javascriptを使用してbase64文字列を保持する場合、javascript変数から文字列を削除(削除)すると、文字列を保持しているメモリが解放されますが、使用されているすべてのメモリが解放されるか、ブラウザは引き続きコピーを保持しますメモリ内のbase64から生成された画像の。

WebSocketを介してロードされたコンテンツをappCacheに書き込むことは可能ですか?たとえば、WebSocketサーバーからbase64文字列です。

LWZ以外のJavascript用のより良い文字列圧縮システムを見つけた人はいますか?サーバー側のアプリケーションを使用して圧縮することを計画しているので、圧縮の唯一の制限はそれをサポートするjavascriptです。

2
Martin Barker

ブラウザが通常どおり(httpリクエスト)アセットをロードすると、レンダリングされなくなった画像はブラウザによってメモリに保持されます。

ブラウザは通常、画像などのファイルをキャッシュします。サーバーにファイルを要求するとき、最初にファイルが変更されているかどうかを尋ねます。ファイルが変更されていないことをブラウザが返した場合、ブラウザはキャッシュからのファイルを使用します。 (これにより、新しいファイルがクライアントにプッシュされない.cssファイルと.jsファイルに変更を加えるときにいくつかの興味深い問題が発生しました)。実験のために、ロード後にWebページから画像を削除し(FirefoxとChromeの両方の開発ツールを使用)、HTMLにコピーして画像をレンダリングすることができました。ページのネットワーク履歴を見ると、画像の初期ロードが表示されますが、HTMLをページにロードして戻した後の2番目のリクエストは表示されません。

Javascriptを使用してbase64文字列を保持する場合、javascript変数から文字列を削除(削除)すると、文字列を保持しているメモリが解放されますが、使用されているすべてのメモリが解放されるか、ブラウザは引き続きコピーを保持しますメモリ内のbase64から生成された画像の。

画像をbase64でエンコードされた文字列から画像に戻すために呼び出しを行う場合、画像は文字列が存在する必要はありません。全体として、ガベージコレクターは使用されていない後にJavaScript変数を処理する必要があるため、javascript変数を削除する必要はありません。

WebSocketを介してロードされたコンテンツをappCacheに書き込むことは可能ですか?たとえば、WebSocketサーバーからbase64文字列です。

WebSocket(正確にはjWebsockets)での私の経験から、それらはページにロードされたjavascriptとインターフェースします。 javascriptを使用してappCacheに書き込むこともできるため、base64文字列をappCacheに書き込むのに問題はありません。

http://www.html5rocks.com/en/tutorials/appcache/beginner/

LWZ以外のJavascript用のより良い文字列圧縮システムを見つけた人はいますか?サーバー側のアプリケーションを使用して圧縮することを計画しているので、圧縮の唯一の制限はそれをサポートするjavascriptです。

申し訳ありませんが、これを手伝うことはできません。これが最も人気のあるオプションのようです。多くのベンチマークを実行しないと、代替手段を使用する理由を説明できませんでした。

3
amethystdragon