100 라인 정도를 갖는 테이블만 해도 DOM에 그려지고 나면 스크롤할 때 어느정도 뻑뻑함이 느껴질 때가 있다.
DOM에 대한 작업이 브라우저에 많은 부하를 걸기 때문인데, 이러한 이유때문에 자바스크립트로 개발된 Grid의 경우 1만 라인만 넘어가도 브라우저가 빈번하게 다운되고 만다.
하지만 최근 대부분의 Grid들이 Virtual Scrolling 이라는 개념을 도입해서 심지어 100만 라인 이상의 아이템도 전혀 무리없이 보여주고 빠르게 스크롤되는 것을 볼 수 있다.
원리는 간단하다. 스크롤된 위치를 계산해서 그 위치에 해당하는 DOM만 그려준다는 것이다.
아래 jsFiddle의 소스를 분석해보면, Virtual Scrolling이 어떠한 원리로 동작하는지 이해할 수 있을 것이다.
무려 2000만개의 아이템이 있지만, 스크롤링 하는데 전혀 딜레이가 느껴지지 않는 것을 볼 수 있다.
DOM에 대한 작업이 브라우저에 많은 부하를 걸기 때문인데, 이러한 이유때문에 자바스크립트로 개발된 Grid의 경우 1만 라인만 넘어가도 브라우저가 빈번하게 다운되고 만다.
하지만 최근 대부분의 Grid들이 Virtual Scrolling 이라는 개념을 도입해서 심지어 100만 라인 이상의 아이템도 전혀 무리없이 보여주고 빠르게 스크롤되는 것을 볼 수 있다.
원리는 간단하다. 스크롤된 위치를 계산해서 그 위치에 해당하는 DOM만 그려준다는 것이다.
아래 jsFiddle의 소스를 분석해보면, Virtual Scrolling이 어떠한 원리로 동작하는지 이해할 수 있을 것이다.
무려 2000만개의 아이템이 있지만, 스크롤링 하는데 전혀 딜레이가 느껴지지 않는 것을 볼 수 있다.
