Web Worker로 이미지 처리, UI는 부드럽게!
by DD
1년 전
조회수 12
고해상도 이미지 처리 시 메모리 과다 사용 및 UI 반응 저하 문제 발생
Web Worker를 도입하여 이미지 디코딩, 리사이징 등 CPU 집약적 작업 분리
Base64 변환 작업에서 처리 시간 65% 감소, 메인 스레드 블로킹 97% 감소
Web Worker, UI를 살리는 비결
Web Worker는 메인 스레드와 분리되어 백그라운드에서 실행되므로 UI 응답성을 유지한다. 구체적으로 이미지 디코딩, 리사이징 같은 CPU 집약적인 작업을 별도 스레드에서 처리한다. 따라서 UI 블로킹을 방지하고, 사용자 경험을 향상시킨다.
OffscreenCanvas vs Canvas, 메모리 효율의 차이
OffscreenCanvas는 Web Worker에서 사용하도록 설계되어 메모리 효율성이 높다. Canvas는 메인 스레드에서 사용 시 메모리 사용량 증가 및 UI 블로킹을 유발한다. 반면 OffscreenCanvas는 DOM에 연결되지 않아 메모리 관리에 유리하다.
Base64 변환, Web Worker 적용 효과
Base64 문자열은 바이너리 데이터보다 용량이 커서 메모리 사용량이 높다. 따라서 Web Worker를 통해 Base64 디코딩 작업을 분리하여 메인 스레드 블로킹을 줄인다. 결과적으로 이미지 처리 속도 향상과 UI 응답성 개선을 달성한다.
