Virtual Scrolling 구현하기 파트1 - 대략적 로직

 이 사이트가 (https://grid.kiwiberry.nz/) 가상 스크롤의 가장 적절한 예제를 보여주고있다.

Vue 로 구현되어있지만, 나는 vanilla HTML 에서 구현해보려한다.

위의 사이트를 스크롤하며 콘솔을 열어 확인해보니 대략 아래와 같은 로직을 확인할수있었다.

 

1. scroll 을 구현할 div 를 먼저 부모 div 로 감싼뒤 overflow: auto 를 설정한다.

2. 이 div 안에 scroll 을 담당할 div 를 넣고,  height 를 item 갯수 * itemHeight 로 매우 길게 생성한다. (이게 중요)

(item 갯수가 100000개라고 가정하면 50px 이라해도 500백만 px 이 나온다)

3. 이제 이 scroll 할 div 에 첫 부모 container (viewport) 보다 충분히 길도록 item 갯수를 추가한다. 

4. addEventListener('scroll') 로 scroll container 의 scrollTop 값을 추적하여,

콜백에서 내가 가지고있는 item 갯수를 초과하게 scrollTop 이 떨어졌을 시점에

첫줄 item 요소의 y 를 css 의 transform : translate 속성으로 현재 scrollTop 시점으로 옮김 + content 를 변경한다.

 

정리하면 scrollBar 의 y 값의 위치(scrollTop) 에 따라 item 의 y 를 transform 으로 옮기면서

item 의 content 또한 업데이트하는것이다.

 

대략은 이러한 로직인듯한데, 막상 구현하는것은 쉽지않을거같다.

 

Virtual Scroll 을 구현해야겠다고 생각하게된 이유는,

파일 탐색기같은 기능의 구현이 필요해졌기때문인데,

PIXI 에서는 scroll 을 할때 상,하단을 가리기위해 mask 기능을 사용해야하는데,

이게 굉장히 cpu hog 였다.

현재 파일 탐색기만 보여지는것이 아니라서 그런지 굉장히 큰 cpu 소모를 발생시켰다.

어쩔수없이 파일탐색기 기능은 DOM 으로 구현하는것이 가장 성능적으로 그나마

랜더링을 분리시킬수있는 방법이었다.

 

물론 언제가는 PIXI 로 구현하는 현명한 방법을 찾긴해야할것이다.

canvas2D 를 레이어해서 해보려고도 해봤으나,

이상하게 canvas2D 가 레이어되고 난뒤에, PIXI 의 프레임이 급격하게 하락했다.

DOM 을 레이어하는것은, DOM 요소의 갯수가 100개 미만일때는 성능을 크게 저하시키지않았으나,

1000개가 넘어가면 매우 큰 성능 저하를 야기했다.