Web Workers를 사용하는 JS의 멀티스레딩

Web Worker: 현재 메인(창) 스레드가 아닌 다른 스레드에서 백그라운드로 스크립트를 실행하는 방법입니다.

1. 웹 작업자와 event_loop를 사용한 비동기
2. 웹 워커 소개
3. 웹 워커 생성 방법
4. 예를 들어 웹 작업자의 경우
5. 웹 워커의 한계
6. Web Workers의 비동기 작업

1. 웹 워커와 이벤트 루프를 사용한 비동기 작업

JavaScript는 일반적으로 작업을 해당 대기열(매크로 작업 대기열, 마이크로 작업 대기열)에 배치하여 비동기 작업을 처리하며, 이벤트 루프는 이러한 대기열을 지속적으로 확인하고 작업이 실행될 준비가 되면 호출 스택에 작업을 푸시합니다. 이 접근 방식은 비차단 실행을 보장하지만 여전히 단일 스레드에서 모든 것을 실행합니다.

Web Worker를 사용하면 스크립트가 자체 호출 스택, 비동기 대기열 및 이벤트 루프가 있는 완전히 별도의 스레드에서 실행될 수 있습니다. 이러한 분리는 작업자가 독립적으로 작동하므로 과도한 계산이나 장기 실행 작업으로 인해 메인 스레드가 차단되는 것을 방지합니다.

2. 웹 워커 소개

웹 작업자는 기본 창 컨텍스트와 다른 컨텍스트에서 스크립트를 실행하여 웹 애플리케이션의 병렬 처리를 가능하게 합니다. Web Worker API는 여러 유형의 작업자를 제공합니다.

• 전담 작업자: 단일 스크립트로 활용되며 메인 스레드에서 작업을 오프로드하는 데 이상적입니다.
• 공유 작업자: 서로 다른 컨텍스트(예: 서로 다른 창 또는 iframe)에서 실행되는 여러 스크립트에서 액세스할 수 있습니다.
• 서비스 워커: 웹 애플리케이션, 브라우저 및 네트워크 간의 프록시 서버로 작동하여 오프라인 지원 및 캐싱과 같은 기능을 제공합니다.

이 글은 가장 구현하기 쉽고 일반적으로 사용되는 전담 작업자에 초점을 맞췄습니다.

3. 웹 워커를 만드는 방법

웹 작업자를 생성하려면 다음 주요 방법을 사용할 수 있습니다.

• new Worker(): 새 워커를 생성하는 생성자
• postMessage(): 메인 스레드에서 워커로 또는 그 반대로 메시지를 보냅니다.
• onmessage: 작업자가 받은 메시지를 처리하도록 설정된 콜백 함수입니다.
• terminate(): 작업자를 즉시 ​​중지합니다.

4. 간단한 예시

API에서 데이터, 특히 Dog CEO API에서 개 이미지를 가져오는 작업자를 만들어 보겠습니다.

4.1 작업자 코드

다음은 작업자 스크립트의 구현입니다. 작업자 내부에서 self는 전역 컨텍스트를 참조하는 데 사용됩니다.

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

이 코드에서 작업자는 메시지(onmessage)를 수신하고 지정된 URL에서 개수에 따라 여러 번 데이터를 가져옵니다.

작업자 내부의 호출 스택은 다음과 같습니다.

4.2 클라이언트 코드

메인 스레드는 다음과 같이 작업자를 사용합니다.

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

이 코드는 작업자에게 메시지를 보내고 메인 스레드에서 가져온 데이터를 받는 방법을 보여줍니다.

전체 코드를 보려면 코드로 이동

5. 웹 작업자의 한계

웹 작업자는 기본 창 스레드와 별도의 스레드에서 실행되지만 특정 제한 사항이 있습니다.

• DOM에 대한 액세스 불가: 작업자는 DOM을 직접 조작할 수 없습니다. UI 업데이트를 위해서는 메인 스레드와의 통신이 필요합니다.
• 리소스 소비: 웹 작업자를 과도하게 사용하면 각 작업자가 독립적으로 작동하기 위해 추가 리소스가 필요하므로 메모리 사용량이 높아질 수 있습니다.

위 내용은 Web Workers를 사용하는 JS의 멀티스레딩의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!