웹 워커를 통해 이미지 색상 수집기 성능 개선하기
프론트엔드
웹 워커를 통해 이미지 색상 수집기 성능 개선하기
두줄요약
Canvas 이미지의 RGBA 배열에서 고유 색상을 추출하는 작업을 웹 워커로 분리했습니다. 다중 워커로 작업을 나눠 메인 스레드 블로킹과 UI 대기시간을 줄였습니다.
문제 상황
- Canvas
ImageData의 RGBA 배열 전체 순회와 고유 색상 추출 과정에서 메인 스레드 점유 - 큰 이미지 처리 중 다른 스크립트와 카운트다운 타이머 지연 가능성
해결 방법
postMessage와onmessage기반 웹 워커로 색상 취합 연산 분리- 이미지 데이터 청크를 다중 워커에 전달하고 각 워커에서
Set으로 RGBA 색상 수집
성능/운영 포인트
- 워커 수 증가에 따라 워커 1개당 처리 시간이 감소하는 측정 결과
- 메인 스레드 블로킹 완화와 UI 갱신 대기시간 단축
- 메시지 전송 시 데이터 복사와 객체 참조 미공유 특성
적용해볼 점
- 대용량 JSON 파싱,
FileReader기반 업로드 파일 읽기 등 무거운 연산의 워커 위임
