virtual scroll은 scroll이 있는 요소에서 사용자가 볼 수 있는 viewport에 있는 요소만 실질적으로 렌더링 하는 기법으로, 이외의 요소들은 스크롤 영역만 차지하고 내부 구현은 하지 않게 하여 렌더링 리소스를 줄일 수 있는 기법이다.
많은 양의 데이터 목록을 화면에 렌더링 하는 경우, 모든 항목을 그리면 성능상 문제를 초래한다.
즉, 10만 개의 데이터를 렌더링 하기 위해 DOM에 10만 개의 노드를 추가하면 Call Stack size error가 발생할 것이다.
위 사진은 약 400개 정도의 데이터를 렌더링한 사진이다.
개발자 도구를 통해 DOM 트리를 확인해보면 다음과 같이 수많은 데이터들이 전부 추가된 것을 볼 수 있다.
이렇게 모든 데이터를 DOM에 추가하는 것이 아닌 현재 viewport의 스크롤 위치를 계산하여 해당 위치에 맞는 데이터(DOM)만 그려주는 최적화 기법이 virtual scroll이다.
