簡化的高效能 JavaScript：Web Workers、SharedArrayBuffer 和 Atomics-js教程-PHP中文網

簡化的高效能 JavaScript：Web Workers、SharedArrayBuffer 和 Atomics

DDD

發布： 2024-12-21 16:00:15

原創

731 人瀏覽過

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

JavaScript 是一種單執行緒語言，這表示任務在主執行緒上一次執行一個。雖然這種設計簡化了開發，但它可能會導致計算繁重的任務出現效能瓶頸。本部落格探討了 Web Workers、SharedArrayBuffer 和 Atomics 如何在 JavaScript 中啟用多執行緒來建立高效能應用程式。

為什麼要使用 Web Workers、SharedArrayBuffer 和 Atomics？

網路工作者

Web Workers 在後台執行緒中執行 JavaScript，防止密集型任務阻塞使用者交互，例如捲動或按鈕點擊。

共享數組緩衝區

SharedArrayBuffer 允許主線程和工作線程之間共享內存，無需複製，從而實現更快的通訊。

原子學

原子確保對共享記憶體的安全和同步訪問，防止競爭條件並保持執行緒之間的資料一致性。

範例：使用 Web Workers 和 SharedArrayBuffer 的實際任務

讓我們實作一個簡單且真實的範例：並行計算大型陣列的總和。

第 1 步：建立 Web Worker 腳本

建立一個名為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 步：設定主執行緒

在主腳本中，將任務指派給worker。

// 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.');
}

登入後複製