핵심 요약
카카오엔터테인먼트가 Canvas에서 이미지 색상 데이터를 수집하는 과정의 메인 스레드 차단 문제를 웹 워커로 해결한 성능 개선 사례를 공유합니다.
구현 방법
- ImageData를 getImageData로 가져와 RGBA를 순회하고 Set에 색상을 누적
- 메인 스레드를 보호하기 위해 다중 워커로 작업 분할 후 postMessage/onmessage로 합산
- 각 워커는 독립적으로 색상 집합 생성, 데이터 복사는 발생하지 않음
주요 결과
- 메인 스레드: 500x500 142.90ms, 1000x1000 486.80ms, 1500x1500 1016.70ms
- 워커 16단 구성 시 단위 작업: 500x500 14.93ms, 1000x1000 34.43ms, 1500x1500 69.89ms
- UI 업데이트 대기시간 감소 및 메인 스레드 블로킹 완화
