JavaScript でのマルチスレッド化のための Web ワーカー-jsチュートリアル-php.cn

JavaScript でのマルチスレッド化のための Web ワーカー

Linda Hamilton

リリース： 2024-12-29 19:13:14

オリジナル

749 人が閲覧しました

Web Workers for Multithreading in JavaScript

JavaScript は、シングルスレッドと呼ばれる単一のシーケンスでコードを実行します。この設計は、Web ブラウザーでの単純なタスクにはうまく機能しますが、複雑な計算やバックグラウンド操作などの重いタスクによってメインスレッドがブロックされると、問題が発生する可能性があります。これらのタスクにより、ページが遅くなり、応答しなくなる可能性があります。これを解決するために、JavaScript は Web ワーカーを提供します。これにより、重いタスクを別のスレッドに移動し、メインスレッドを解放してスムーズなユーザー操作を実現できます。

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

Web ワーカーは、JavaScript コードを別のスレッドのバックグラウンドで実行できるようにする Web API の機能です。これにより、マルチスレッドのような動作が可能になり、リソースを大量に消費するタスクをメインスレッドからオフロードすることでパフォーマンスが向上します。

Web ワーカーは異なる実行コンテキストで動作します。つまり、DOM、ウィンドウ、またはドキュメントオブジェクトにアクセスできません。ただし、メッセージを介してメインスレッドと通信できます。

Web ワーカーの使用方法

Web Workers を使用するためのステップバイステップのガイドは次のとおりです:

ワーカーファイルを作成する Web ワーカーには、バックグラウンドで実行されるコードを含む別の JavaScript ファイルが必要です。たとえば、worker.js という名前のファイルを作成します。

// worker.js
self.onmessage = function(event) {
    const data = event.data;
    const result = performHeavyComputation(data);
    self.postMessage(result);
};

function performHeavyComputation(input) {
    // Simulate a CPU-intensive task
    let total = 0;
    for (let i = 0; i < 1e7; i++) {
        total += i * input;
    }
    return total;
}

ログイン後にコピー

メインスレッドでワーカーを初期化します Worker コンストラクターを使用して、メインスクリプトでワーカーのインスタンスを作成します。

// main.js
const worker = new Worker('worker.js');

// Send data to the worker
worker.postMessage(42);

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

// Handle errors
worker.onerror = function(error) {
    console.error('Worker error:', error.message);
};

ログイン後にコピー

ワーカーを終了する

ワーカーのタスクが完了したとき、または不要になった場合は、ワーカーを終了してリソースを解放します。

worker.terminate();

ログイン後にコピー

例: 大きな配列のソート

大きな配列をソートするとメインスレッドがブロックされ、UI がフリーズする可能性があります。 Web Worker を使用してこのタスクを処理しましょう:

ワーカーファイル (sortWorker.js):

self.onmessage = function(event) {
    const sortedArray = event.data.sort((a, b) => a - b);
    self.postMessage(sortedArray);
};

ログイン後にコピー

メインスクリプト:

const largeArray = Array.from({ length: 1e6 }, () => Math.random());
const sortWorker = new Worker('sortWorker.js');

sortWorker.postMessage(largeArray);

sortWorker.onmessage = function(event) {
    console.log('Sorted array:', event.data);
};

sortWorker.onerror = function(error) {
    console.error('Error in sorting worker:', error.message);
};

ログイン後にコピー