9MB JSON 렌더링 병목 해결을 통한 초고속 Table View 구현

Context

대규모 Array of Objects 구조를 단순 Pretty-print 대신 Table View로 시각화하려는 시도에서 UI Freezing 발생. 9MB 데이터 처리 시 JSON.parse와 60,000개 DOM 노드 생성으로 인한 메인 스레드 점유가 핵심 병목으로 작용.

Technical Solution

• content-visibility: auto 적용을 통한 뷰포트 외 레이아웃 계산 생략 및 체감 성능 향상
• Web Worker 도입 후 structured-clone 비용으로 인한 성능 저하를 확인하여 CPU Bound 작업 외의 단순 파싱-전달 구조에서 Worker 사용 지양
• 30,000개 행 전체 렌더링 대신 상하단 Spacer Row를 활용한 Virtual Scrolling 구현으로 DOM 노드 수 최소화
• 5MB 초과 대용량 파일 처리 시 textarea.value 할당 시 발생하는 레이아웃 연산 병목을 방지하기 위해 Editable 영역 제외 처리
• 빌드 단계와 의존성을 제거한 Single HTML 파일 구조를 채택하여 런타임 오버헤드 제거 및 오프라인 실행 가능성 확보