프론트엔드
웹 워커를 통해 이미지 색상 수집기 성능 개선하기
두줄요약
Canvas ImageData의 색상 수집 작업을 다중 웹 워커로 분할해 처리 시간을 줄였습니다.\n메인 스레드 블로킹을 완화해 UI 갱신과 다른 스크립트 지연을 줄였습니다.
문제 상황
- Canvas의 ImageData 전체 순회와 RGBA 색상 추출 과정에서 메인 스레드 점유
- 대용량 이미지 처리 중 다른 스크립트와 UI 갱신 지연 가능성
구조와 흐름
- ImageData의 RGBA 4바이트 단위 순회와 Set 기반 고유 색상 취합
- 메인 스레드에서 이미지 배열을 청크로 분할해 다중 웹 워커에 메시지 전달
- 각 워커의 색상 Set 결과를 메인 스레드로 반환하는 메시지 기반 통신
성능/운영 포인트
- 워커 수 증가에 따라 워커 단위 색상 수집 시간이 감소
- 500~1500px Canvas 비교에서 메인 스레드 단독 처리보다 워커 분할 처리 시간 단축
- 무거운 순회 작업의 백그라운드 위임으로 타이머 멈춤 등 메인 스레드 블로킹 완화
적용해볼 점
- 대용량 JSON 파싱과 FileReader 기반 파일 데이터 처리의 웹 워커 위임 가능성
