簡素化された高性能 JavaScript: Web ワーカー、SharedArrayBuffer、および Atomics-jsチュートリアル-php.cn

簡素化された高性能 JavaScript: Web ワーカー、SharedArrayBuffer、および Atomics

DDD

リリース： 2024-12-21 16:00:15

オリジナル

732 人が閲覧しました

High-Performance JavaScript Simplified: Web Workers, SharedArrayBuffer, and Atomics

JavaScript はシングルスレッド言語であり、タスクはメインスレッドで一度に 1 つずつ実行されます。この設計により開発は簡素化されますが、計算量の多いタスクではパフォーマンスのボトルネックが発生する可能性があります。このブログでは、Web Workers、SharedArrayBuffer、Atomics を使用して JavaScript でマルチスレッドを有効にし、高パフォーマンスのアプリケーションを構築する方法を検討します。

Web Workers、SharedArrayBuffer、Atomics を使用する理由

ウェブワーカー

Web ワーカーはバックグラウンドスレッドで JavaScript を実行し、集中的なタスクがスクロールやボタンのクリックなどのユーザーインタラクションをブロックするのを防ぎます。

共有配列バッファ

SharedArrayBuffer を使用すると、コピーせずにメインスレッドとワーカー間でメモリを共有できるため、より高速な通信が可能になります。

原子

アトミックにより、共有メモリへの安全で同期したアクセスが保証され、競合状態が防止され、スレッド間でのデータの一貫性が維持されます。

例: Web ワーカーと SharedArrayBuffer を使用した実際のタスク

簡単な実際の例を実装してみましょう。大きな配列の合計を並列で計算します。

ステップ 1: Web ワーカースクリプトの作成

部分和の計算を処理するために、worker.js という名前のファイルを作成します。

// worker.js
self.onmessage = function (event) {
    const { array, start, end } = event.data;
    let sum = 0;
    for (let i = start; i < end; i++) {
        sum += array[i];
    }
    self.postMessage(sum);
};

ログイン後にコピー

ステップ 2: メインスレッドのセットアップ

メインスクリプトで、ワーカー間でタスクを分割します。

// main.js
const array = Array.from({ length: 1_000_000 }, () => Math.floor(Math.random() * 100));
const numWorkers = 4;
const chunkSize = Math.ceil(array.length / numWorkers);
const workers = [];
const results = [];
let completedWorkers = 0;

// Create a SharedArrayBuffer for the array
const sharedBuffer = new SharedArrayBuffer(Int32Array.BYTES_PER_ELEMENT * array.length);
const sharedArray = new Int32Array(sharedBuffer);
sharedArray.set(array);

// Initialize workers
for (let i = 0; i < numWorkers; i++) {
    const worker = new Worker('worker.js');
    workers.push(worker);

    const start = i * chunkSize;
    const end = Math.min(start + chunkSize, array.length);

    worker.postMessage({ array: sharedArray, start, end });

    worker.onmessage = function (event) {
        results[i] = event.data;
        completedWorkers++;

        if (completedWorkers === numWorkers) {
            const totalSum = results.reduce((acc, curr) => acc + curr, 0);
            console.log('Total Sum:', totalSum);
        }
    };
}

ログイン後にコピー

ステップ 3: 同期にアトミックを使用する

Atomics を使用して進行状況を管理したり、続行する前にすべてのスレッドが完了していることを確認したりできます。

const progress = new Int32Array(sharedBuffer);
Atomics.add(progress, 0, 1); // Increment progress

if (Atomics.load(progress, 0) === numWorkers) {
    console.log('All workers completed their tasks.');
}

ログイン後にコピー