Web Components의 메모리 낭비와 성능 저하, JS Object 기반 렌더링으로 해결

Context

Web Components는 생성 시 반드시 DOM 노드를 할당하는 구조적 제약 보유. 대규모 데이터 렌더링 시 C++ 힙 메모리 과다 점유 및 JIT 최적화 상실 문제 발생. DOM 직접 조작으로 인한 렌더링 성능 저하와 테스트 효율성 감소 문제 상존.

Technical Solution

• HTMLElement 상속 대신 순수 JS Object 기반의 컴포넌트 설계로 메모리 오버헤드 제거
• 가시 영역 내 요소만 렌더링하는 Virtualization 전략을 통해 DOM 노드 생성 최소화
• Push 방식의 이벤트 기반 반응형 구조를 자동 의존성 그래프 기반의 Pull reactivity로 전환
• DOM 속성 직접 수정 대신 JS Property 변경 후 requestAnimationFrame을 이용한 배치 업데이트 수행
• DOM 렌더링 과정 없이 상태 값만 검증하는 Pure JS 테스트 환경 구축으로 테스트 속도 개선
• 브라우저 표준 검색 기능을 오버라이드하여 렌더링되지 않은 전체 데이터 대상 검색 로직 구현

Impact

• 메모리 사용량: Web Component(124 bytes/node) 대비 JS Object(16 bytes/object)로 약 8배 절감
• DOM 조작 속도: JS Object 변경(1-2 ns) 대비 DOM textContent 변경(30-60 ns) 시 약 30배 속도 저하
• 대규모 데이터 처리 성능: 100,000개 태스크 처리 시 Lit(120 ms) 대비 $mol(15 µs)로 약 8,000배 성능 차이

Key Takeaway

최고 수준의 성능 최적화를 위해서는 브라우저의 DOM 추상화 계층을 최소화하고 JS 런타임의 효율성을 극대화하는 데이터 중심 설계가 필수적임.