[FE] Web Worker

Web Worker

JS는 싱글 스레드이기 때문에 스크립트가 실행되면 해당 스크립트가 종료될 때까지 해당 웹 페이지는 응답 불가 상태

이를 해결하기 위해 스크립트 연산을 웹의 메인 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술

Web Worker를 통해 무거운 작업을 분리된 스레드에서 처리하면 메인 스레드가 멈추거나 느려지지 않고 동작 가능

 

Web Worker는 스크립트의 다중 스레드를 지원

=> 시간이 오래 걸리는 JS 작업 실행중에도 사용자가 웹 페이지를 사용할 수 있음...!

 

워커 스레드의 전역 객체는 window가 아니라 globalThis

JavaScript는 싱글스레드라며...

자바스크립트의 언어적 특징을 참고하면 좋다

그러니까 Web APIs를 이용하면 충분히 비동기적으로 사용할 수 있다는 의미

여기서 말한 Web Worker가 Web API의 한 종류

Web Worker 동작방식

Web Worker는 기본적으로 DOM에 직접 접근 할 수 없기 때문에 메인 스레드와 서로 메세지를 주고 받아서 통신

백그라운드 스레드에서 돌리고자 하는 코드를 분리된 파일에 두고, 메인 스레드에서는 해당 파일을 Worker로 선언하여 데이터와 연산 결과를 주고 받는다

위의 그림처럼 postMessage를 사용해서 Worker에게 데이터를, 메인 스레드에 결과 값을 전달하고

각각 onmessage 이벤트를 감지해 postMessage를 통해 받아온 정보를 사용

1. main. js에서 web worker를 사용하기 위해선 일단 web worker 파일을 생성해야 함
2. main.js에서 new Worker("worker.js")를 통해 worker 객체를 생성
3. main.js에서 postMessage()를 통해서 데이터를 전달
4. worker.js에서는 onmessage를 통해 메인 스레드로부터 전송된 메세지를 확인
5. worker.js에서 특정 메세지를 main.js에 보내고 싶다면 동일하게 postMessage()를 사용
6. 더 이상 worker 스레드가 필요하지 않거나 작업을 종료해야 한다면 terminate()를 호출해서 스레드를 종료

Web Worker의 장단점

- 장점

    UI 성능 향상 : 무거운 작업이 메인 스레드에서 처리되지 않기 때문에 UI가 부드럽게 유지될 수 있음

    병렬 처리 : web worker를 여러개 사용하면 병렬로 작업 처리도 가능함 => 작업시간 단축 효과

    메모리 독립성 : web worker는 메인 스레드와 별도의 메모리 공간을 사용

    즉 web worker는 메인 스레드의 메모리 자원을 침범하지 않음

- 단점

    DOM 접근 불가 : web worker는 DOM에 접근할 수 없어서 HTML 요소를 읽거나 수정하는 것이 불가능

    메세지 기반 통신 : web worker와 메인 스레드는 데이터를 주고받기 위해 postMessage와 onmessage를 사용

    이로 인해 통신이 약간 번거로워질 수 있으며, 특히 큰 데이터를 주고받는 경우 성능에 영향을 줄 수 있음

    추가적인 관리 필요 : web worker는 독립적인 스레드이기 때문에 생성과 종류, 메세지 처리를 수동적으로 관리해야 함
    제대로 관리가 되지 않는 경우 메모리 누수나 성능 저하가 발생할 수 있음

Web Worker 종류

- 전용 워커 (Dedicated Worker)

단일 스크립트에서만 사용하는 스레드

보통 워커를 구현한다고 했을 때 가장 많이 사용하며 적용 또한 단순

message passing 방식으로 메인 스레드와 워커 스레드가 서로 통신

 

- 공유 워커 (Shared Worker)

공유 워커는 윈도우 창, iframe 등 다른 브라우저 환경에서 접근 가능한 워커

공유 워커를 생성한 컨텍스트가 종료되어도 다른 브라우저 환경이 존재한다면 공유 워커는 여전히 존재한다는 특징

 

- 서비스 워커 (Service Worker)

서비스 워커는 웹 사이트의 캐시를 관리하기 위한 워커

여러 개의 페이지와 연결할 수 있다는 점은 공유 워커와 비슷

네트워크 연결이 끊기는 경우에도 브라우저고 정상적으로 웹페이지를 보여줄 수 있도록 캐시된 데이터를 서비스 워커가 리턴하는 방식으로 사용하는 것이 대표적인 용도

Web Worker vs Promise

비동기 방식으로 처리 하는 방식은 promise도 존재

하지만 Promise는 기본적으로 JavaScript의 기능이고 Web Worker는 Web API 종류 중 하나 라는게 가장 큰 차이점

즉,  Promise는 Web API를 통해 비동기 처리가 되긴 하지만 결국 싱글 스레드에서 동작한다는 의미

 

예를 들어서 for 문을 3억번 돌리고 나면 1000을 콘솔창에 찍는 함수를 promise를 이용해서 동시에 3번 실행시켰다고 가정하자

아무리 비동기 방식으로 처리한다고 해도 결국 JS는 싱글 스레드이기 때문에 1000이 순차적으로 3번 콘솔창에 찍힌다

반면에 web worker를 이용해서 동일한 함수를 동시에 3번 실행시키면 1000 3줄을 동시에 콘솔창에서 확인할 수 있다