프론트엔드
Main Thread Blocking 개선 사례
두줄요약
수만 건 Grid 화면에서 Cell 계산과 데이터 조합이 반복되며 Main Thread Blocking이 발생했습니다. 사전 집계와 계산 결과 재사용으로 반복 연산을 줄여 개선했습니다.
문제 상황
- 수만 건 데이터를 Grid에 표현하는 과정에서 조회보다 가공·조합·렌더링 비용이 더 크게 발생
- Cell 생성 시마다 Related Data를 반복 탐색해 Main Thread가 길게 점유되는 구조
- 로딩 중 다른 동작에서 화면이 멈추는 Main Thread Blocking과 Long Task 발생
원인 분석
- Cell 단위 valueGetter에서 filter()와 map()을 반복 수행하는 O(N×M) 탐색 구조
- 데이터 갱신, 정렬, 필터 시 Cell 값 재계산으로 동일 연산이 중복 발생
- Virtualization이 DOM 범위만 줄일 뿐 JavaScript 연산 비용은 줄이지 못함
해결 방법
- Related Data를 targetId 기준 Map으로 사전 집계해 Lookup 구조 구성
- Grid 전달 전 Main Data에 relatedNames를 포함해 Cell 계산 제거
- 렌더링 단계에서 반복 탐색과 중복 계산을 분리하고 계산 결과 재사용
