1만 개의 작업에서 Angular Gantt가 느려지는 이유 (그리고 해결 방법)
(dev.to)대규모 데이터 환경에서 Angular Gantt 차트의 성능 저하를 유발하는 과도한 DOM 생성과 변경 감지 문제를 분석하고, 가상 스크롤링 및 OnPush 전략 등 단계별 최적화 방안을 제시하여 서비스의 확장성과 사용자 경험을 확보하는 방법을 다룹니다.
이 글의 핵심 포인트
- 11만 개의 작업은 최대 10만 개의 DOM 노드를 생성하여 브라우저 렌더링에 심각한 과부하를 유발함
- 2성능 저하의 핵심 원인은 Angular 프레임워크 자체보다 과도한 DOM 노드 수와 변경 감지(Change Detection) 비용임
- 3가상 스크롤링(Virtual Scrolling)은 수직적 렌더링은 해결하지만, 수평적 복잡성이나 극단적인 대규모 데이터에는 한계가 있음