HTML5：WebソケットとWebワーカー

演習中に、Web ワーカーはページのパフォーマンスに影響しますか?という多肢選択式の質問が出題されました。家庭教師後は影響しないというのが答えです。

Web ワーカーについて学ぶために関連情報を参照し、Web ソケットに出会いました。要約は次のとおりです。

Web ソケットとワーカーの機能: 高性能 Web アプリケーションを構築するための新しいリファレンス ソリューションを提供します。

Web ソケットはより効率的な送信プロトコルを提供し、Web ワーカーは Web アプリケーションの計算効率を向上させるマルチスレッドを提供します。

一.webソケット

1.webソケットはプロトコルであり、本質的にはhttpやtcpと同じです。このプロトコルは、socket.io を使用して小さなオンライン チャットを作成し、プロジェクトを要約するために使用されます。

2. Web ソケットには 2 つのプレフィックスがあります: (1) ws:// は暗号化されません。 (2)wss://は暗号化されています。

3. クライアントとサーバーが Web ソケットと対話する方法は、「http ハンドシェイク + tcp データ送信」方式としても理解できます。

(1) ブラウザー (Websocket をサポートするブラウザー) がリクエストを開始します。サーバーからの応答を待ちます。

(2) サーバーはハンドシェイク応答を返し、websocket で指定されたデータ形式に従って後続のデータを渡すようにブラウザーに指示します。

(3) ブラウザーとの間のソケット接続。サーバーは中断されません。現時点で、この接続と http の違いは、二重であることです。

(4) ブラウザーとサーバーに転送する必要があるデータがある場合、データ転送にこの長い接続を使用します。

注: HTTP ハンドシェイク: これは、長い接続を確立する際のブラウザとサーバー間のハンドシェイク プロセスが、リクエスト、リクエスト ヘッダー、レスポンス、レスポンス ヘッダーを含む HTTP1.1 プロトコルに従って送信されるためです。ただし、ヘッダーのフィールドには特定の意味があるという点が異なります。

TCP 送信: 主に、長時間の接続を確立した後、ブラウザーがサーバーにデータを送信でき、サーバーもブラウザーにリクエストを送信できるという事実に反映されています。もちろん、そのデータ形式は独自に定義されているわけではありません。送信されるデータの外層には、wsプロトコルで規定されるアウターパケットが存在します。

4. データ送信プロセス: WebSocket のデータ送信形式は次のとおりです。たとえば、メッセージはいくつかのフレームに分割され、順番に送信されます。これにはいくつかの利点があります:

(1) データのサイズによって引き起こされる長さ不足フラグを考慮せずに、大きなデータの送信をフラグメントで送信できます。

(2) HTTPチャンクと同様に、データを送信しながらメッセージを生成できるため、送信効率が向上します。

5. クライアントは Web ソケット構文: JavaScript を使用します。

サーバー: 複数の Web フレームワークをサポートします。

二.web ワーカー

1. HTML ページでスクリプトを実行すると、スクリプトが完了するまでページは応答しません。

Web ワーカーは、他のスクリプトから独立してバックグラウンドで実行される JavaScript であり、ページのパフォーマンスには影響しません。 Web ワーカーがバックグラウンドで実行されている間、クリックや選択など、必要な操作を続行できます。

DOM 操作に加えて、理論的にはあらゆる JS スクリプト タスクをワーカーに入れて実行できます。構文上の制限として、ドメインを越えて JS にアクセスすることはできません。ワーカーは、フロントエンド ユーザーの操作をよりわかりやすくするために、つまり、ユーザー エクスペリエンスの観点からサービスのパフォーマンスを向上させるために、多くの時間と CPU リソースを必要とする複雑な計算に使用されることがよくあります。

2. Web ワーカーの使用法: (Web ワーカー オブジェクトを作成すると、終了するまで (外部スクリプトが完了した後でも) メッセージをリッスンし続けます。)

(1) 「onmessage」を追加することによってWeb ワーカーに「受信メッセージを取得するイベント リスナー。

メッセージ送信：postMessage()

Webワーカーを終了し、ブラウザ/コンピュータリソースを解放：terminate()

var worker =new Worker("worker_job.js"); //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL

 worker.postMessage("hello world");     //向worker发送数据
 
 worker.onmessage =function(evt){     //接收worker传过来的数据函数
   console.log(evt.data);              //输出worker发送来的数据
 }

(2) イベントリスナーを追加してメッセージを処理し、self経由でmain関数と通信します。ワーカー内部の関数 スレッド通信:

self.addEventListener('message', function(e) {
    var data = e.data;
    if(data == 'init')
        init();
    else
        ...
}, false);

self.postMessage("hello worker");

参考資料:

WebソケットとWebワーカーの基本原理と使い方

HTTPプロトコルチャンクエンコーディング(チャンク転送エンコーディング)

7つのWebソケットフレームワークのパフォーマンス比較