JavaScript Berprestasi Tinggi Dipermudahkan: Pekerja Web, SharedArrayBuffer dan Atomics

JavaScript ialah bahasa satu utas, bermakna tugas dilaksanakan satu demi satu pada utas utama. Walaupun reka bentuk ini memudahkan pembangunan, ia boleh menyebabkan kesesakan prestasi untuk tugasan berat secara pengiraan. Blog ini meneroka cara Pekerja Web, SharedArrayBuffer dan Atomics boleh mendayakan multithreading dalam JavaScript untuk membina aplikasi berprestasi tinggi.

Mengapa Menggunakan Pekerja Web, SharedArrayBuffer dan Atomics?

Pekerja Web

Pekerja Web menjalankan JavaScript dalam urutan latar belakang, menghalang tugas intensif daripada menyekat interaksi pengguna seperti menatal atau klik butang.

SharedArrayBuffer

SharedArrayBuffer membenarkan memori dikongsi antara utas utama dan pekerja tanpa menyalin, membolehkan komunikasi lebih pantas.

Atomics

Atomics memastikan akses selamat dan disegerakkan kepada memori yang dikongsi, menghalang keadaan perlumbaan dan mengekalkan konsistensi data merentas urutan.

Contoh: Tugas Dunia Nyata dengan Pekerja Web dan SharedArrayBuffer

Mari kita laksanakan contoh mudah dan dunia nyata: mengira jumlah tatasusunan yang besar secara selari.

Langkah 1: Mencipta Skrip Pekerja Web

Buat fail bernama worker.js untuk mengendalikan pengiraan jumlah separa:

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

Langkah 2: Sediakan Benang Utama

Dalam skrip utama, bahagikan tugas antara pekerja.

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

Langkah 3: Menggunakan Atomics untuk Penyegerakan

Gunakan Atomics untuk mengurus kemajuan atau memastikan semua urutan selesai sebelum meneruskan.

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

Faedah Pendekatan Ini

• Pengalaman Pengguna Lancar: Memunggah pengiraan daripada urutan utama.

• Komunikasi Lebih Pantas: SharedArrayBuffer mengelakkan penyalinan data antara urutan.

• Keselamatan Benang: Atomics menyediakan alatan untuk mengendalikan penyegerakan dengan berkesan.

Kes Penggunaan Dunia Sebenar

• Analitis Masa Nyata: Proses set data yang besar secara selari untuk mendapatkan cerapan yang lebih pantas.

• Enjin Permainan: Lakukan simulasi fizik dalam urutan berasingan.

• Pemprosesan Media: Mengekod atau menyahkod strim video tanpa ketinggalan UI.

Rujukan

Dokumen Web MDN: Pekerja Web

Dokumen Web MDN: SharedArrayBuffer

Dokumen Web MDN: Atomics

Atas ialah kandungan terperinci JavaScript Berprestasi Tinggi Dipermudahkan: Pekerja Web, SharedArrayBuffer dan Atomics. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!