今日の複雑で機(jī)能豊富な Web アプリケーションの世界では、パフォーマンスが最優(yōu)先事項(xiàng)です。 JavaScript は強(qiáng)力ですが、シングルスレッドであるため、一度に 1 つのタスクしか実行できません。この制限は、特に畫像処理や大規(guī)模な計(jì)算などの集中的なタスクを?qū)g行する場合に、パフォーマンスのボトルネックにつながる可能性があります。

Web Workers を入力します。これは、JavaScript 開発者がバックグラウンド スレッドでスクリプトを?qū)g行できるようにする機(jī)能です。 Web ワーカーは、メイン スレッドから負(fù)荷の高い計(jì)算をオフロードするメカニズムを提供し、アプリケーションの応答性を確保します。

この記事では、Web ワーカー、その利點(diǎn)、実際の使用例、実裝戦略について詳しく説明します。最後には、Web 開発プロジェクトで Web ワーカーの可能性を最大限に活用する方法がわかるでしょう。

---

Web ワーカーとは何ですか?

Web ワーカーは、メイン スレッドとは別にバックグラウンドで JavaScript コードを?qū)g行できるようにする最新の Web ブラウザーの機(jī)能です。つまり、ユーザー インターフェイス (UI) をブロックすることなく重いタスクを?qū)g行できるため、アプリケーションがよりスムーズで高速になります。

Web ワーカーは HTML5 Web API の一部であり、ほとんどの最新ブラウザで広くサポートされています。

Web ワーカーの主な機(jī)能:

1. マルチスレッド: タスクを並列スレッドで実行します。
2. ノンブロッキング UI: 負(fù)荷の高い計(jì)算を?qū)g行している間、UI の応答性を維持します。
3. コンテキスト分離: ワーカーは、メインスレッドから分離された獨(dú)自のグローバル コンテキストで実行されます。
4. メッセージングベースの通信: メッセージパッシングシステムを使用して、メインスレッドとワーカースレッドの間で通信します。

---

Web ワーカーの種類

Web ワーカーには主に 3 つのタイプがあります:

1. 専用ワーカー: 1 つのスクリプトを排他的に提供する?yún)g一のワーカー。
2. 共有ワーカー: 複數(shù)のスクリプト間で共有できるワーカー。
3. サービス ワーカー: 主にネットワーク リクエストをインターセプトし、オフライン機(jī)能 (プログレッシブ Web アプリなど) を有効にするために使用される特殊なタイプのワーカー。

このガイドでは、最も一般的に使用される 専任ワーカー に焦點(diǎn)を當(dāng)てます。

---

Web ワーカーの使用方法

1. 基本的な Web ワーカーの作成

Web ワーカーを作成するには、次の手順に従います:

ステップ 1: ワーカー スクリプトを作成する

ワーカー用に別の JavaScript ファイルを作成します。たとえば、worker.js:

// worker.js
self.onmessage = function (event) {
  console.log('Message received from main thread:', event.data);

  // Perform heavy computation
  const result = event.data * 2;

  // Send result back to main thread
  self.postMessage(result);
};

ここで、onmessage イベント ハンドラーはメイン スレッドからのメッセージをリッスンし、それらを処理し、postMessage を使用して応答を送信します。

ステップ 2: メイン スクリプトでワーカーを使用する

メインの JavaScript ファイル內(nèi):

// main.js
if (window.Worker) {
  // Create a new Web Worker
  const myWorker = new Worker('worker.js');

  // Send data to the worker
  myWorker.postMessage(10);
  console.log('Message sent to worker');

  // Receive data from the worker
  myWorker.onmessage = function (event) {
    console.log('Message received from worker:', event.data);
  };

  // Handle worker errors
  myWorker.onerror = function (error) {
    console.error('Error from worker:', error.message);
  };
} else {
  console.log('Web Workers are not supported in this browser.');
}

結(jié)果:

• メイン スクリプトはワーカーに數(shù)値 10 を送信します。
• ワーカーは數(shù)値を 2 倍にして 20 を返します。
• 結(jié)果がコンソールに表示されます。

---

2. Web ワーカーの終了

ワーカーのジョブが完了したら、ワーカーを終了してリソースを解放する必要があります。

myWorker.terminate();
console.log('Worker terminated');

---

3. ワーカーのエラー処理

Web ワーカーのエラーは、onerror イベントを使用して捕捉できます。

myWorker.onerror = function (error) {
  console.error('Error from worker:', error.message);
};

---

Web ワーカー向けの実用的な使用例

1. 複雑な計(jì)算

Web ワーカーは、大規(guī)模なデータセットの処理、數(shù)學(xué)的計(jì)算、科學(xué)シミュレーションなど、CPU を大量に使用する計(jì)算を?qū)g行するのに最適です。

例: フィボナッチ數(shù)列の計(jì)算

ワーカー スクリプト (worker.js):

self.onmessage = function (event) {
  const num = event.data;
  const fib = (n) => (n <= 1 ? n : fib(n - 1) + fib(n - 2));
  const result = fib(num);
  self.postMessage(result);
};

メインスクリプト (main.js):

const worker = new Worker('worker.js');
worker.postMessage(40); // Calculate the 40th Fibonacci number

worker.onmessage = function (event) {
  console.log('Result:', event.data);
  worker.terminate(); // Terminate the worker after use
};

---

2. 畫像処理

Web ワーカーは、メインスレッドをフリーズさせることなく、畫像の圧縮や操作などのタスクを処理できます。

---

3. リアルタイムデータ処理

Web Workers は、WebSocket データ ストリームや IoT アプリケーションのセンサー読み取り値などのリアルタイム データ分析に最適です。

---

Web ワーカーの制限

Web Workers は強(qiáng)力ですが、いくつかの制限があります。

• 限定されたコンテキスト:
  ワーカーは、DOM、ウィンドウ オブジェクト、またはドキュメントなどの親オブジェクトにアクセスできません。

• リソース使用量が多い:
  各ワーカーは新しいスレッドを生成し、メモリを消費(fèi)します。

• 非同期通信:
  メインスレッドとワーカー間の通信により、遅延が発生する可能性があります。

• ブラウザのサポート:
  Web Workers は最新のブラウザでサポートされていますが、古いブラウザでは動作しない可能性があります。

---

Web ワーカーのデバッグ

Web ワーカーをデバッグするには、ブラウザの開発者ツールを使用します。 Web ワーカーには、実行を検査できる獨(dú)自の専用のデバッグ タブがあります。

---

Web Workers を使用するためのベスト プラクティス

1. ワーカー スクリプトを軽量に保つ

   • リソースの使用量を削減するには、肥大化したスクリプトを避けてください。

2. 必要のない労働者を解雇する

   • 作業(yè)者はタスクを完了した後に必ず終了させて??ください。

3. 通信オーバーヘッドを最小限に抑える

   • スレッド間で交換されるメッセージのサイズと頻度を制限します。

4. 互換性のためにトランスパイラを使用する

   • 最新の JavaScript 機(jī)能を使用している場合は、コードをトランスパイルして互換性を確保してください。

---

結(jié)論

Web Workers は、最新の Web 開発のための強(qiáng)力なツールであり、開発者が重いタスクを軽減し、アプリケーションの応答性を維持できるようにします。大規(guī)模なデータセットの処理、リアルタイム データ ストリームの処理、畫像操作の実行など、Web ワーカーはアプリケーションのパフォーマンスとユーザー エクスペリエンスを大幅に向上させることができます。

Web ワーカーの制限を理解し、ベスト プラクティスを採用することで、プロジェクトで Web ワーカーを最大限に活用できます。今すぐ実験を開始して、アプリケーションのパフォーマンスがこれまで以上に向上していることを確認(rèn)してください!

---

さらに読む

• MDN Web ドキュメント: Web ワーカー

以上がJavaScript で Web ワーカーをマスターする: 完全ガイドの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。