メインスレッドをブロックせずに、Webワーカーを使用して背景で長期にわたるタスクを実行するにはどうすればよいですか？-jsチュートリアル-php.cn

メインスレッドをブロックせずに、Webワーカーを使用して背景で長期にわたるタスクを実行するにはどうすればよいですか？

Karen Carpenter

リリース： 2025-03-14 11:39:32

オリジナル

933 人が閲覧しました

メインスレッドをブロックせずに、Webワーカーを使用して背景で長期にわたるタスクを実行するにはどうすればよいですか？

Webワーカーは、バックグラウンドでJavaScriptを実行できる最新のWeb開発の重要な機能であり、長期にわたる操作がメインスレッドをブロックしてユーザーの相互作用に影響を与えることを妨げます。 Webワーカーの使用方法は次のとおりです。

ワーカースクリプトの作成：まず、ワーカー用の個別のJavaScriptファイルを作成する必要があります。たとえば、 worker.jsという名前を付けることができます。このスクリプトには、バックグラウンドで実行するコードが含まれます。 worker.jsでは、メインスレッドとは独立して実行される機能を定義できます。
```
 <code class="javascript">// worker.js self.onmessage = function(e) { let result = performLongRunningTask(e.data); self.postMessage(result); }; function performLongRunningTask(data) { // Simulating a long-running task for (let i = 0; i </code>
```
ログイン後にコピー
メインスレッドからWebワーカーを開始します。メインJavaScriptファイルでは、ワーカースクリプトを参照してWebワーカーのインスタンスを作成できます。
```
 <code class="javascript">// main.js let worker = new Worker('worker.js'); worker.postMessage(50000000); // Send data to the worker</code>
```
ログイン後にコピー
ワーカーから結果を受け取ります：メインスクリプトでは、ワーカーから送信されたメッセージを聞くことができます。
```
 <code class="javascript">// main.js worker.onmessage = function(e) { console.log('Message received from worker:', e.data); };</code>
```
ログイン後にコピー

これらの手順に従うことにより、長期にわたるタスクをWebワーカーに委任し、アプリケーションが応答性の高いままであることを確認できます。

最適なパフォーマンスを確保するために、Webワーカーに最適なタスクの種類は何ですか？

Webワーカーは、CPU集約型または時間がかかるタスクに特に役立ちます。 Webワーカーに適したタスクのいくつかのタイプを以下に示します。

データ処理と計算：複雑な数学計算の並べ替え、フィルタリング、実行など、大量のデータの処理を含むタスクが理想的な候補です。たとえば、大きなデータセットのフーリエ変換を計算します。
画像およびビデオ処理：画像のサイズ変更、フィルターの適用、ビデオフレームのデコードなどの操作は、UIフリーズを避けるためにWebワーカーにオフロードできます。
暗号化操作：暗号化、復号化、またはかなりの時間がかかる可能性のあるその他の暗号化プロセスを含むタスクは、Webワーカーに最適です。
バックグラウンドの同期とポーリング：サーバーとデータを同期するなど、ユーザーの相互作用なしに定期的に実行する必要があるタスクの場合、Webワーカーは有益です。
機械学習とAIの推論：モデルの推論またはトレーニングの実行機械学習モデルを背景に実行でき、UIスレッドはユーザーインタラクションのために無料です。

これらのタイプのタスクに焦点を当てることにより、最適なパフォーマンスを維持し、ユーザーインターフェイスを応答し続けることができます。

メインスレッドとWebワーカーの間でタスクの実行を管理するにはどうすればよいですか？

メインスレッドとWebワーカー間の通信は、タスクの実行を効果的に管理するために重要です。これを達成する方法は次のとおりです。

メインスレッドからワーカーにメッセージを送信する：

メインスクリプトのワーカーオブジェクトのpostMessageメソッドを使用して、ワーカーにデータまたは手順を送信できます。
```
 <code class="javascript">// main.js worker.postMessage({task: 'start', data: someData});</code>
```
ログイン後にコピー
労働者からメインスレッドにメッセージを送信します。

ワーカースクリプトでは、 self.postMessageを使用してメインスレッドにメッセージを送り返すことができます。
```
 <code class="javascript">// worker.js self.postMessage({status: 'completed', result: someResult});</code>
```
ログイン後にコピー
メインスレッドでメッセージを聞く：

onmessageプロパティまたはaddEventListenerメソッドを使用して、ワーカーからのメッセージを聞くことができます。
```
 <code class="javascript">// main.js worker.onmessage = function(e) { if (e.data.status === 'completed') { console.log('Task completed with result:', e.data.result); } };</code>
```
ログイン後にコピー
労働者のメッセージを聞く：

ワーカースクリプトでは、メインスレッドからメッセージを受信するためにイベントリスナーを設定できます。
```
 <code class="javascript">// worker.js self.onmessage = function(e) { if (e.data.task === 'start') { let result = performTask(e.data.data); self.postMessage({status: 'completed', result: result}); } };</code>
```
ログイン後にコピー

これらの通信チャネルを実装することにより、メインスレッドとWebワーカーの間のタスクの実行を効果的に管理できます。

アプリケーションのエラーを処理し、Webワーカーのライフサイクルを管理するにはどうすればよいですか？

適切なエラー処理とライフサイクル管理は、Webワーカーを効果的に使用するために不可欠です。これらの側面にアプローチする方法は次のとおりです。

エラー処理：

メインスレッドでは、 onerrorプロパティまたはaddEventListenerを使用して、ワーカーが投げたエラーをキャッチできます。
```
 <code class="javascript">// main.js worker.onerror = function(e) { console.error('Worker error:', e.message, e.filename, e.lineno); };</code>
```
ログイン後にコピー

ワーカーでは、 try...catchブロックを使用してエラーをキャッチし、メインスレッドに報告します。

 <code class="javascript">// worker.js self.onmessage = function(e) { try { let result = performLongRunningTask(e.data); self.postMessage(result); } catch (error) { self.postMessage({error: error.message}); } };</code>

ログイン後にコピー

ライフサイクル管理：
- 労働者の終了： terminate方法が不要になったら、作業員を終了することができます。
```
 <code class="javascript">// main.js worker.terminate();</code>
```
  ログイン後にコピー
- 労働者の再起動：労働者を再利用する必要がある場合は、古いインスタンスを終了した後、新しいインスタンスを作成できます。
```
 <code class="javascript">// main.js worker.terminate(); worker = new Worker('worker.js');</code>
```
  ログイン後にコピー
- 複数の労働者の管理：複雑なアプリケーションの場合、複数の労働者を管理する必要がある場合があります。配列またはオブジェクトを使用してそれらを追跡し、 terminateなどの方法を使用してライフサイクルを管理します。
```
 <code class="javascript">// main.js let workers = []; workers.push(new Worker('worker1.js')); workers.push(new Worker('worker2.js')); // Terminate all workers workers.forEach(worker => worker.terminate());</code>
```
  ログイン後にコピー