웹 워커와 서비스 워커를 실행 위치로 구분하기

역할 선택

CPU 작업인지 네트워크·오프라인 정책인지 먼저 나눈다.

별도 스크립트를 로드하고 postMessage로 입력 데이터를 보낸다.

워커는 계산하거나 fetch 이벤트를 처리하고 DOM은 직접 만지지 않는다.

메인 스레드는 message 이벤트로 결과를 받아 화면 상태를 갱신한다.

Web Worker

UI 멈춤 완화 파싱, 이미지 처리, 대량 계산을 분리

데이터 복사 비용 측정

Service Worker

네트워크 중간 계층 요청을 가로채 캐시와 offline fallback 적용

HTTPS 필요

Transferable

복사 비용 감소 ArrayBuffer 소유권을 넘겨 큰 데이터 전송 최적화

원본 사용 불가

Lifecycle

설치와 활성화 service worker는 install, activate, fetch 단계가 있음

업데이트 정책 중요

분리 이유 워커로 보낼 만큼 작업 비용이 큰지 측정한다.

전송 비용 데이터 복사가 성능 이득을 지우지 않는다.

캐시 버전 서비스 워커 갱신 때 오래된 캐시를 정리한다.

DOM 화면 반영은 메인 스레드가 맡는다.