가상화 목록(list virtualization)으로 리스트 최적화 하기

가상화 목록이란?

큰 리스트를 렌더링 할 때 뷰포트 안에 보이는 요소들만 렌더링하는 것을 말합니다. 가령 1000개의 요소가 있으면 그 중의 일부만 렌더링 하는 것이죠.

가상화 목록은 어떻게 동작하나요?

1. 작은 DOM 엘리먼트를 만들어 냅니다. 이때 스타일은 relative로 줍니다.
2. 스크롤 하기 위한 큰 엘리먼트를 만들어냅니다. 이 엘리먼트는 1에서 만든 요소의 자식입니다
3. 2에서 만든 엘리먼트에 top, left, width, height를 계산하여 목록 중 보여야 하는 부분을 계산하여 absolute로 2에서 만든 DOM 위에 띄웁니다.

이렇게 하면 리스트의 스크롤은 있으면서 한 번에 큰 리스트를 렌더링 하지 않아도 됩니다.

CSS에도 이런 기능이 있다고?

최근 일부 모던 브라우저(크롬, 엣지, 오페라)에서 css의 content-visibility 프로퍼티를 사용할 수 있습니다 큰 엘리먼트의 요소 중 일부가 아직 화면에 보이지 않는 경우, 보이지 않는 요소의 렌더링과 페인팅을 막을 수 있습니다.

최적화는 항상 어려운 과제인 것 같네요😇

참고 : https://www.patterns.dev/posts/virtual-lists/