Web Worker로 메인 스레드 부하 줄이기

웹 워커(Web Workers)란?

웹 워커는 무거운 연산을 메인 스레드와 분리해 백그라운드에서 처리할 수 있게 해주는 브라우저 기능이다. 이를 활용하면 UI 렌더링이 끊기거나 입력 반응이 느려지는 문제를 줄일 수 있다.

왜 필요한가?

• 메인 스레드는 렌더링, 이벤트 처리, JS 실행을 모두 담당한다.
• 복잡한 계산을 메인 스레드에서 처리하면 UI가 멈추는 현상이 생긴다.
• 웹 워커를 사용하면 연산을 백그라운드에서 처리할 수 있어 UX가 부드러워진다.

간단한 예제

worker.js

self.onmessage = function(e) {
  const result = e.data * 2;
  postMessage(result);
};

main.js

const worker = new Worker('worker.js');

worker.postMessage(5);

worker.onmessage = function(e) {
  console.log('결과:', e.data);
};

사용할 때 주의할 점

• DOM 접근 불가
• CPU 연산이 많은 작업에 적합
• 지나치게 많은 워커 생성은 오히려 성능 저하

마무리

웹 워커는 UI를 끊기지 않게 유지하는 데 매우 효과적인 기술이다. 계산량이 많은 기능을 다루는 웹앱이라면 꼭 고려해야 한다.