메인 스레드 병목 분리
파싱, 압축, 이미지 처리, 긴 계산처럼 UI를 막는 작업은 worker로 보내 메시지로 결과를 받습니다.
계산메시지와 전송 비용
postMessage는 복사 비용이 있으므로 큰 바이너리는 Transferable을 써서 소유권을 넘깁니다.
통신서비스 워커 설치
install, activate, fetch 이벤트를 통해 캐시 준비, 이전 캐시 정리, 요청 전략을 구성합니다.
수명 주기업데이트 전략
새 서비스 워커가 바로 적용되지 않을 수 있으므로 사용자 새로고침, skipWaiting, 캐시 버전을 정책으로 정합니다.
운영Web Worker
현재 페이지의 CPU 작업 분리
페이지가 닫히면 함께 사라지고 DOM 대신 메시지로만
협업합니다.
thread
Service Worker
페이지 밖에서 fetch와 cache를 제어
HTTPS 환경과 등록 scope가 중요하며 lifecycle을 이해해야
합니다.
proxy
Cache 전략
cache first, network first, stale while revalidate를 자원
성격별로 선택
HTML, API, 정적 에셋을 같은 전략으로 다루면 오래된 화면이
남습니다.
offline
DOM 접근 · 범위 · 캐시 갱신 점검
Worker 메시지 흐름
const worker = new Worker('/heavy-task.js');
worker.postMessage({ items
overflow-wrap: break-word;
word-break: keep-all;
});
worker.onmessage = (event) => render(event.data);