단순화된 고성능 JavaScript: Web Workers, SharedArrayBuffer 및 Atomics-JS 튜토리얼-php.cn

단순화된 고성능 JavaScript: Web Workers, SharedArrayBuffer 및 Atomics

DDD

풀어 주다： 2024-12-21 16:00:15

원래의

733명이 탐색했습니다.

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

JavaScript는 단일 스레드 언어입니다. 즉, 작업은 메인 스레드에서 한 번에 하나씩 실행됩니다. 이 디자인은 개발을 단순화하지만 계산량이 많은 작업에서는 성능 병목 현상이 발생할 수 있습니다. 이 블로그에서는 Web Workers, SharedArrayBuffer 및 Atomics가 JavaScript의 멀티스레딩을 활성화하여 고성능 애플리케이션을 구축하는 방법을 살펴봅니다.

Web Worker, SharedArrayBuffer 및 Atomics를 사용하는 이유는 무엇입니까?

웹 작업자

웹 작업자는 백그라운드 스레드에서 JavaScript를 실행하여 스크롤이나 버튼 클릭과 같은 집중적인 작업으로 인해 사용자 상호 작용이 차단되는 것을 방지합니다.

공유 배열 버퍼

SharedArrayBuffer를 사용하면 복사하지 않고도 메인 스레드와 작업자 간에 메모리를 공유할 수 있으므로 더 빠른 통신이 가능합니다.

원자학

Atom은 공유 메모리에 대한 안전하고 동기화된 액세스를 보장하여 경합 상태를 방지하고 스레드 전체에서 데이터 일관성을 유지합니다.

예: Web Workers 및 SharedArrayBuffer를 사용한 실제 작업

대규모 배열의 합을 병렬로 계산하는 간단하고 실제적인 예를 구현해 보겠습니다.

1단계: 웹 작업자 스크립트 생성

부분 합계 계산을 처리하기 위해 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 사용

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

로그인 후 복사