Worker decision map

문제의 위치를 보면 어떤 워커가 필요한지 보인다

메인 스레드가 바쁜지, 네트워크 요청을 제어해야 하는지, 화면을 즉시 바꿔야 하는지에 따라 선택지가 달라집니다.

Main thread

화면과 DOM 반응

  • 클릭, 입력, 포커스처럼 사용자와 바로 연결된 작업을 처리합니다.
  • DOM을 직접 읽고 바꾸는 코드는 메인 스레드에서 실행합니다.
  • 오래 걸리는 계산을 넣으면 렌더링과 입력 반응이 함께 느려집니다.
Web worker

무거운 계산 분리

  • 이미지 처리, 대량 데이터 정렬, 압축 같은 CPU 작업에 적합합니다.
  • `postMessage()`로 데이터만 주고받으며 DOM에는 직접 접근하지 않습니다.
  • 작업이 끝나면 결과를 메인 스레드로 보내 UI를 갱신합니다.
Service worker

요청과 캐시 제어

  • `fetch` 요청을 가로채 캐시 또는 네트워크 응답을 선택합니다.
  • 오프라인 화면, 빠른 재방문, 백그라운드 동기화에 사용합니다.
  • HTTPS와 생명주기 점검이 필요하므로 개발자 도구에서 상태를 확인합니다.

빠른 판단 흐름

화면이 멈춘다 계산량이 큰 함수를 찾아 웹 워커로 옮깁니다.
오프라인을 지원한다 서비스 워커와 캐시 전략을 설계합니다.
버튼을 누르면 UI가 변한다 DOM 조작은 메인 스레드에 남깁니다.
둘 다 필요하다 계산은 웹 워커, 요청 제어는 서비스 워커로 역할을 나눕니다.

핵심 기준: 웹 워커는 페이지 내부의 연산 부담을 줄이고, 서비스 워커는 페이지 바깥에서 네트워크와 캐시를 관리합니다.