Blob.slice 기반 부분 읽기로 브라우저 메모리 부하 최소화 및 대용량 PNG 데이터 추출

JavaScript: Handling Large Files in the Browser. Part 1/2: Reading Large Files

Alexey Boyko2026년 4월 26일4분intermediate

AI 요약

Context

PNG 이미지 끝단에 커스텀 데이터를 결합하여 저장하는 DGRM.net의 데이터 구조 설계. 파일 크기 증가에 따라 전체 파일을 메모리에 로드할 때 발생하는 브라우저 리소스 고갈 문제 직면.

Technical Solution

HTMLInputElement를 활용해 파일 데이터 전체 로드 없이 Blob 참조 객체만 획득하는 방식 채택
Blob.slice를 이용해 8바이트 단위로 Chunk Length와 Header만 읽어내는 순차 탐색 로직 구현
IEND 블록 위치를 찾기 위한 반복적 스캔을 통해 메모리 점유율을 최소화하는 데이터 오프셋 계산
전체 스캔의 시간 복잡도를 개선하기 위해 파일 서두에 데이터 위치 정보를 담은 Custom dgRp 블록 추가 설계
JSON 메타데이터는 전체 로드하되 대용량 Attachment는 캐시 확인 후 필요 시에만 로드하는 지연 로딩 전략 적용

실천 포인트

- 브라우저 환경에서 GB 단위 대용량 파일 처리 시 File/Blob.slice를 통한 부분 읽기 검토 - 바이너리 파일 구조 설계 시 메타데이터 영역을 서두에 배치하여 전체 스캔 비용 제거 - 대용량 첨부 파일의 경우 메모리 상주를 피하고 온디맨드 방식으로 로드하는 캐싱 전략 수립

태그

#Lazy Loading #Binary Parsing #Frontend Architecture #Blob #Memory Management

원문 읽기