マインドマップギャラリー ウェブワーカー
Web ワーカーの理解と使用。Web ワーカーは、HTML5 によって提供および標準化された API のセットであり、JavaScript のマルチスレッド実行環境を作成します。
2024-03-08 16:53:42 に編集されましたウェブワーカー
Web ワーカーの誕生
誰もが知っているように、js は元々ブラウザ内で実行されるように設計されました。
複数のスレッドが同時に DOM を操作してレンダリングの競合が発生するのを防ぐために、js executor はシングルスレッドになるように設計されています。
フロントエンド テクノロジーの発展に伴い、大量の計算を必要とするシナリオに遭遇すると、js スレッドが長時間ブロックされることが多く、ページ フリーズを引き起こすこともあり、ユーザー エクスペリエンスに影響を与えます。
Web ワーカーについて学ぶ
Webワーカーとは何ですか?
Web ワーカーは HTML5 標準の一部です
メインの js スレッドの外側で新しいワーカー スレッドを開き、その中で js スクリプトを実行できるようにする一連の API を定義します。
開発者は js を使用してマルチスレッドを操作できるようになります。
スクリプトが長時間実行されても、Web アプリケーションの UI は応答性を維持します。
Web ワーカーの利点
ページのパフォーマンスを向上させる: データ処理や画像処理などの計算集約型または時間のかかる一部の操作を、メイン スレッドを占有せずにバックグラウンド スレッドで実行することで、ページの遅延やフリーズを回避し、ページのパフォーマンスと応答性を向上させます。 。
大規模なデータを処理する: 大規模なデータは別のスレッドで実行され、メインスレッドの実行に影響を与えないため、より効率的に処理でき、コードの効率とスケーラビリティが向上します。
コードをよりモジュール化する: コードを複数のモジュールに分割し、異なるスレッドで実行できるため、コードがよりモジュール化され、保守しやすく、読みやすくなります。
マルチスレッドのサポート: マルチスレッドをサポートしているため、マルチコア プロセッサを利用してコードの実行効率を向上させることができます。
Web Worker の使用シナリオ
画像処理: 回転、トリミング、拡大縮小、フィルターなど。これにより、画像処理のパフォーマンスと応答性が向上します。
データ処理: データセットのフィルタリング、並べ替え、要約、変換など。これにより、データ処理の効率と精度が向上します。
計算集約型のタスク: シミュレーション、最適化、予測、統計など。これにより、コンピューティング タスクの速度と精度が向上します。
リアルタイム通信: チャット ルーム、ゲーム、ビデオ会議など。これにより、リアルタイム通信の安定性とパフォーマンスが向上します。
オフライン キャッシュ: よく使用されるリソースをクライアントのローカル キャッシュに事前にダウンロードでき、インターネットにアクセスできない場合でもキャッシュ内のリソースを使用できます。これにより、特にモバイル デバイスでのアプリケーションの使いやすさと応答性が向上します。
マルチスレッド処理: 並列コンピューティング、タスク分散、負荷分散など。これにより、システムの同時実行性とスケーラビリティが向上します。
Web ワーカーの使用法
ワーカーを作成します。 new を介して Worker() コンストラクターを呼び出すだけで、次の 2 つのパラメーターを受け取ります。 const worker = new Worker(path, options);
js メイン スレッドとワーカー スレッドのデータ転送: メイン スレッドとワーカー スレッドはどちらも postMessage メソッドを通じてメッセージを送信し、メッセージ イベントをリッスンしてメッセージを受信します。
メイン スレッドとワーカー スレッド間のデータ転送は、アドレスではなく値によって行われます。したがって、オブジェクトを渡して直接返したとしても、受け取った値は元の値ではありません。
エラー メッセージをリッスンする: Web ワーカーは、エラーをリッスンする 2 つのイベントを提供します。
error: ワーカー内でエラーが発生したときにトリガーされます
messageerror: メッセージ イベントが逆シリアル化できないパラメーターを受け取ったときにトリガーされます。
ワーカー スレッドを閉じる: ワーカー スレッドのシャットダウンはメイン スレッドとワーカー スレッドの両方で操作できますが、ワーカー スレッドへの影響は若干異なります。
類似点: ワーカーがメイン スレッド内でシャットダウンされても、ワーカー スレッド内でシャットダウンされても、ワーカー スレッドの現在のイベント ループ内のタスクは実行を継続します。
違い: ワーカーがメイン スレッドで手動で閉じられると、ワーカー スレッドの現在のイベント ループで実行するタスクがまだある場合でも、メイン スレッドとワーカー スレッドの間の接続は即座に停止されます。 () メソッドは引き続き呼び出されますが、メインスレッドはメッセージを受信しなくなります。 ワーカー スレッド内でワーカーを閉じても、メイン スレッドから直接切断されるのではなく、ワーカー スレッドの現在のイベント ループのすべてのタスクが完了するまで待ってから閉じます。つまり、現在のイベント ループで postMessage() メソッドを呼び出し続けた場合でも、メイン スレッドはメッセージ イベントをリッスンすることでメッセージを受信できます。
ワーカー スレッドが他の js ファイルを参照する
Web ワーカーは、必要な js ファイルをロードするためにワーカー スレッドに importScripts() メソッドを提供します。さらに、このメソッドを通じてロードされた js ファイルは、同一生成元ポリシーの対象ではありません。
ESModule モード: js ファイルが ESModule モードの場合、importScripts() はファイルのインポートに失敗します。この場合、const worker = new Worker('/worker.js', {type: 'module'}) を使用する必要があります。 ) ファイルの種類を指定すると、インポート方法を使用して導入できます
メインスレッドとワーカースレッドの間で受け渡しできるデータの種類
Error オブジェクト、Function オブジェクト、Dom ノードは渡せません
シェアードワーカー
複数のウィンドウ、iframe、ワーカーなどの複数の閲覧コンテキストからアクセスできる特殊なタイプのワーカーですが、これらの閲覧コンテキストは同じオリジンを持つ必要があります。
通常のワーカーとは異なるインターフェイスで実装され、異なるグローバル スコープ: SharedWorkerGlobalScope を持ちますが、WorkerGlobalScope から継承されます。
ワーカーとの違い: メイン スレッドと SharedWorker スレッドは MessagePort を介してリンクを確立し、データ通信メソッドはすべて SharedWorker.port にマウントされます。addEventListener を使用してメッセージ イベントを受信する場合、メイン スレッドが SharedWorker() を初期化した後、それが実行されます。ポートを手動で開くには SharedWorker.port.start() メソッドを呼び出す必要がありますが、onmessage メソッドが使用されている場合、ポートはデフォルトで開かれるため、SharedWorker.port.start() メソッドを手動で呼び出す必要はありません。
注: コンソールを使用してsharedWorkerスレッドの情報を出力しても、メインスレッドのコンソールには表示されません。
sharedWorker をデバッグするには、Chrome ブラウザで chrome://inspect/ と入力する必要があります。ここで、実行中のすべてのsharedWorkerが表示され、独立した開発ツール パネルが開きます。
互換性
Web ワーカーはほとんどのブラウザですでにサポートされており、使用する際に互換性の問題を考慮する必要は基本的にありません。
SharedWorkerはSafariとモバイル端末との互換性があまり良くないので、使用する際には注意が必要です。