Webアプリケーションがサーバーから大量のデータを取得し、デコードして宛先に送信する必要がある場合があります。 この例としては、各モデルがgzip'an json'eで数メガバイトを占有できるオンライン3Dエディターがあります。
平均的なユーザーのブラウザがデータをダウンロードおよび展開するときに1秒以上フリーズした場合はどうすればよいですか?
1.フラッシュ上で何かを思いつきます(100%確信はありませんが、一部のブラウザーはメインスレッドでプラグインを起動します)
2.データを分割してロードし、分割して処理します。
3.ユーザーにコンピューターのアップグレードを依頼します。
3つのオプションはすべて正しくありませんか?
カットの下で、この問題に対するエレガントなソリューション(不要なスクリプトとアプリコードなし)。
Webワーカーは私たちの助けになります。幸いなことに、内部にはxhrインターフェイスがあります。
古き良きXHRをワーカーでソルトする必要がありますが、XHRの古いバージョンを使用するスクリプトがスプーフィングに気付かないように、これを行う必要があります。 そして、古いブラウザは、労働者のサポートなしで、以前と同じように機能します。
基本として、Pro JavaScript Design Patterns(7.03-XHRファクトリーの例)のxhrスクリプトを使用します。
xhrスクリプトは、3つのモードで動作するはずです:古いブラウザのxhr、wxhrホスト、wxhrワーカー。
作業の論理は次のとおりです。
0.ユーザーはxhr.requestを実行します
1.ブラウザがワーカーを保持していない場合、以前と同様に作業します
2.ブラウザが保持している場合、リクエストメソッドでワーカー(wxhr.js)を生成し、リクエストを実行しません。
2.1ワーカーの適切なイベントを切断し、postMessageを介してワーカーにリクエストをプロキシします
3. wxhr.jsスクリプトはワーカーとして起動され、スクリプトはワーカーモードで動作していることを理解し、メッセージイベントをハングさせます。
3.1スクリプトはリクエストを受け取り、
3.2通常のxhrオブジェクトを作成し、
3.3通常のxhr.requestを実行し、
3.4データの処理、データのホストへの転送、
3.5ホストは、ワーカーによって処理されたデータを使用してコールバックを行います。
パッチを当てたxhr別名wxhr:
(function (global) {
作業例:
azproduction.ru/wxhrどこでもwxhrを使用することはお勧めしません。大量の入力データの処理が必要な場合にのみ必要です。他の場合は、メインストリーム(ワーカーのスポーン、ダブルデータ転送)から常にxhrに劣ります。 一部のブラウザ、特にサファリでは、postMessageは送信前にjsonでデータをエンコードし、受信時にデコードします。 そのため、通常のxhrよりもさらに悪化する可能性があります。
テストを実施:キャッシュをバイパスして2つの同一のリクエストを開始し、最初にwxhr、2番目にxhrを送信しました。 クロムでは、wxhrの100%のケースでffとサファリが2番目に、オペラでは75%のwxhrが2番目に来ました。 データ6バイト+ヘッダー。