JavaScript의 멀티스레딩을 위한 웹 워커-JS 튜토리얼-php.cn

JavaScript의 멀티스레딩을 위한 웹 워커

Linda Hamilton

풀어 주다： 2024-12-29 19:13:14

원래의

749명이 탐색했습니다.

Web Workers for Multithreading in JavaScript

JavaScript는 단일 스레드라고 하는 단일 시퀀스로 코드를 실행합니다. 이 디자인은 웹 브라우저의 간단한 작업에는 적합하지만, 복잡한 계산이나 백그라운드 작업과 같은 무거운 작업으로 인해 메인 스레드가 차단되면 문제가 발생할 수 있습니다. 이러한 작업으로 인해 페이지가 느려지고 응답하지 않을 수 있습니다. 이 문제를 해결하기 위해 JavaScript는 무거운 작업을 별도의 스레드로 옮기고 원활한 사용자 상호 작용을 위해 기본 스레드를 자유롭게 유지하는 Web Worker를 제공합니다.

웹 작업자란 무엇입니까?

Web Workers는 JavaScript 코드가 별도의 스레드에서 백그라운드로 실행될 수 있도록 하는 Web API의 기능입니다. 이를 통해 멀티스레딩과 유사한 동작이 가능해지며 리소스 집약적인 작업을 메인 스레드에서 오프로드하여 성능이 향상됩니다.

Web Worker는 다른 실행 컨텍스트에서 작동합니다. 즉, DOM, 창 또는 문서 개체에 액세스할 수 없습니다. 하지만 메시지를 통해 메인 스레드와 소통할 수 있습니다.

웹 워커를 사용하는 방법

다음은 Web Workers 사용에 대한 단계별 가이드입니다.

작업자 파일 만들기 Web Worker에는 백그라운드에서 실행될 코드가 포함된 별도의 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;
}

로그인 후 복사

메인 스레드에서 작업자 초기화 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);
};

로그인 후 복사

근로자 해고

직원의 작업이 완료되거나 더 이상 필요하지 않은 경우 종료하여 리소스를 확보하세요.

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

로그인 후 복사