피드로 돌아가기
Dev.toFrontend
원문 읽기
Web Worker와 Chunking으로 2GB 파일 해싱 시 UI 프리징 및 OOM 완벽 해결
Why Your Browser Crashes on Large File Hashing (and How to Fix It with Web Workers)
AI 요약
Context
JavaScript의 Single-threaded 특성으로 인해 대용량 파일의 SHA-256 연산 시 Main Thread 점유로 인한 브라우저 프리징 발생. 기존 crypto.subtle.digest API의 Monolithic한 구조와 FileReader.readAsArrayBuffer의 메모리 중복 할당으로 인한 Out-of-Memory(OOM) 현상이 주요 병목 지점으로 작용.
Technical Solution
- 10MB 단위의 Chunked Progressive Stream으로 파일을 분할 읽어 메모리 점유율을 고정적으로 유지하는 설계
- Web Worker를 활용하여 Cryptographic Computation을 Background Thread로 분리함으로써 UI 렌더링 성능(60 FPS) 확보
- Web Crypto API의 제약을 극복하기 위해
.update()메서드를 지원하는 WASM 기반 Progressive Hashing Engine 도입 - 파일 전체를 메모리에 적재하지 않고 Chunk별 연산 후 메모리를 즉시 해제하는 순차적 파이프라인 구축
- WASM-powered Worker를 통한 연산 가속화로 JS 기반 엔진 대비 처리 속도 최적화
실천 포인트
- 50ms 이상의 블로킹 연산 발생 시 Web Worker 도입 검토 - 대용량 파일 처리 시 전체 적재 방식 대신 Chunk 단위의 Progressive 처리 로직 적용 - 브라우저 기본 API의 기능적 한계(Monolithic ingest) 존재 시 WASM 기반 라이브러리 대안 고려 - 메모리 복제(Copying)로 인한 Heap Memory 급증 가능성을 고려한 버퍼 관리 전략 수립