ホームページ > 記事 > ウェブフロントエンド > Web ワーカーを使用した JS でのマルチスレッド化

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

王林オリジナル: 2024-08-16 06:18:02294ブラウズ

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

Web ワーカーと、event_loop を使用した非同期
Web ワーカーの概要
Web ワーカーの作成方法
Web ワーカーの例
Web ワーカーの制限
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 からカウントで指定された回数だけデータを取得します。

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

MultiThreading In JS using Web Workers

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 });
        }
    }
};

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

MultiThreading In JS using Web Workers