Web ワーカーを使用した JS でのマルチスレッド化

Web Worker: 現在のメイン (ウィンドウ) スレッドとは別のスレッドでバックグラウンドでスクリプトを実行する方法。

1. Web ワーカーと、event_loop を使用した非同期
2. Web ワーカーの概要
3. Web ワーカーの作成方法
4. Web ワーカーの例
5. Web ワーカーの制限
6. Web Workers での非同期操作

1. Web ワーカーとイベント ループを使用した非同期操作

JavaScript は通常、対応するキュー (マクロタスク キュー、マイクロタスク キュー) にタスクを配置することによって非同期操作を処理します。イベント ループはこれらのキューを継続的にチェックし、実行の準備ができたらタスクをコール スタックにプッシュします。このアプローチでは、ノンブロッキングの実行が保証されますが、すべてが単一のスレッドで実行されます。

一方、

Web Workers では、独自のコール スタック、非同期キュー、イベント ループを備えた完全に別個のスレッドでスクリプトを実行できます。この分離により、ワーカーが独立して動作するため、メインスレッドが重い計算や長時間実行されるタスクによってブロックされるのを防ぎます。

2. Web ワーカーの概要

Web ワーカーは、メイン ウィンドウのコンテキストとは異なるコンテキストでスクリプトを実行し、Web アプリケーションでの並列処理を可能にします。 Web Worker API は、いくつかのタイプのワーカーを提供します。

• 専用ワーカー: 単一のスクリプトによって使用され、メインスレッドからタスクをオフロードするのに最適です。
• 共有ワーカー: 異なるコンテキスト (異なるウィンドウや iframe など) で実行されている複数のスクリプトからアクセスできます。
• Service Worker: Web アプリケーション、ブラウザ、ネットワーク間のプロキシ サーバーとして動作し、オフライン サポートやキャッシュなどの機能を提供します。

この記事では、実装が最も簡単で一般的に使用される 専用ワーカー に焦点を当てます。

3. Web ワーカーの作成方法

Web ワーカーを作成するには、次の主要なメソッドを使用できます:

• new Worker(): 新しいワーカーを作成するコンストラクター。
• postMessage(): メインスレッドからワーカーに、またはその逆にメッセージを送信します。
• onmessage: ワーカーが受信したメッセージを処理するために設定されたコールバック関数。
• terminate(): ワーカーを直ちに停止します。

4. 簡単な例

API からデータ、特に Dog CEO API から犬の画像を取得するワーカーを作成しましょう。

4.1 ワーカーコード

これはワーカー スクリプトの実装です。ワーカー内では、self がグローバル コンテキストを参照するために使用されていることに注意してください。

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

このコードでは、ワーカーはメッセージ (onmessage) をリッスンし、指定された URL からカウントで指定された回数だけデータを取得します。

ワーカー内の呼び出しスタックは次のようになります:

4.2 クライアントコード

メインスレッドは次のようにワーカーを使用します:

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

このコードは、ワーカーにメッセージを送信し、メインスレッドでフェッチされたデータを受信する方法を示しています。

完全なコードについては、コードにアクセスしてください

5. Web ワーカーの制限

Web ワーカーはメイン ウィンドウ スレッドとは別のスレッドで実行されますが、次のような制限があります。

• DOM へのアクセスなし: ワーカーは DOM を直接操作できません。 UIを更新するにはメインスレッドとの通信が必要です。
• リソース消費: Web ワーカーを使いすぎると、各ワーカーが独立して動作するために追加のリソースが必要になるため、メモリ使用量が高くなる可能性があります。

以上がWeb ワーカーを使用した JS でのマルチスレッド化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。