3월 기술면접대비 - 데이터 10,000개를 가지고 무한 스크롤 구현시에 가장 중요하게 고려해야 할 점은?

 

 

 

무한스크롤로 인한 DOM의 개수가 매우 많아지게 되면 브라우저의 레이아웃과 페인트로 인해 렌더링이 지연되므로 웹 성능 저하의 원인이 됩니다.

그러므로

1.  성능 최적화를 위해 한 페이지에 20개정도씩만 로드하도록 구현하고

2. 이미 로드된 데이터는 캐싱해두어 사용자가 스크롤을 올릴 때 다시 로드하지 않아도 되도록 할 것입니다.

그리고 3. 가상 스크롤과 같은 기법을 사용해 현재 화면에 보이는 아이템만 실제 DOM에 렌더링하고 나머지는 제거하는 방식을 적용하면 좋을 것 같습니다.

* 레이아웃 : 각 요소의 크기와 위치를 계산 * 페인트 : 화면에 요소를 그리는 과정