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

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

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

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

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

Web ワーカーの使用方法

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

1. ワーカー ファイルを作成する 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;
}

1. メインスレッドでワーカーを初期化します 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);
};

1. ワーカーを終了する

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

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

Web ワーカーの利点

• パフォーマンスの向上: タスクを別のスレッドにオフロードすることで、メインスレッドがブロックされるのを防ぎます。
• ユーザー エクスペリエンスの向上: 集中的な操作中でも UI の応答性は維持されます。
• スケーラビリティ: 複数のワーカーが異なるタスクを同時に処理できます。

Web Workers 開発者が直面する限界

Web ワーカーにはメリットがある一方で、いくつかの欠点や制限もあります。

• DOM アクセスなし: ワーカーは DOM を直接操作できません。
• コンテキスト分離: ワーカーは独自のグローバル スコープを持ち、メイン スレッドの変数や関数にアクセスできません。
• オーバーヘッド: ワーカーの作成とワーカーとの通信にはコストがかかるため、非常に小さなタスクには適していません。

Web ワーカーの結論

Web ワーカーを使用すると、重いタスクをバックグラウンドで実行できるため、JavaScript に複数のスレッドがあるように感じられます。これらを効果的に使用する方法を学ぶことで、より高速で応答性の高い Web アプリケーションを開発できます。

より高度なスレッド機能が必要なシナリオの場合は、Web ワーカー モデルを拡張する共有ワーカーやワークレットなどのオプションを検討してください。 Web ワーカーを適切に使用すると、JavaScript アプリケーションのパフォーマンスと応答性を大幅に向上させることができます。

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