무거운 계산을 별도 스레드에서 실행하는 원리를 배웁니다.
Worker는 메인 화면 스레드와 분리되어 계산하므로 UI 멈춤을 줄입니다. postMessage로 데이터를 주고받으며 Worker 안에서는 DOM을 직접 수정할 수 없습니다.
버튼을 누르면 1부터 받은 수까지 더하는 Worker 코드를 문자열로 만들고, Blob과 URL.createObjectURL로 주소를 만들어 Worker를 띄웁니다. postMessage(1000000)으로 계산을 맡기는 동안 메인 스레드는 계산 중 문구를 보여 주고, Worker가 돌려준 500000500000은 toLocaleString으로 자릿수 구분 기호를 넣어 표시됩니다. 결과를 받으면 cleanup이 Worker를 끝내고 URL도 해제합니다.
postMessage로 보낸 값은 구조화된 복제로 복사되므로 Worker가 받은 객체를 고쳐도 메인 스레드의 원본은 바뀌지 않습니다. 큰 ArrayBuffer는 postMessage(buffer, [buffer])처럼 전송 목록에 넣으면 복사 없이 소유권이 넘어가고 보낸 쪽 buffer의 길이는 0이 됩니다. 함수나 DOM 노드는 복제할 수 없어 DataCloneError가 납니다.
Worker를 만들기만 하고 terminate하지 않거나 너무 자주 생성하면 자원을 낭비할 수 있습니다.
직접 바꿔보세요계산 범위를 5,000,000으로 바꾸고 결과를 비교하세요.