무한스크롤 가상화 적용

필요성

Q&A에서 무한스크롤 시 DOM에 요소가 지속적으로 추가되는 현상이 발생하여 렌더링 성능 감소

스크롤 전 초기 상태

스크롤 후

메모리 사이즈가 증가함을 알 수 있음 ( 무한 스크롤을 계속 실행할 경우 사이즈는 계속 증가 )

가상화란?

웹앱에서 대규모 데이터 목록을 처리할 떄 쓰는 기술
DOM에 모든 항목을 한번에 렌더링하지 않고, 유저가 보고 있는 영역만 렌더링

장점

초기로딩속도, 메모리 사용량 , 부드러운 사용자 경험

가상화 적용

https://github.com/Central-MakeUs/PreviewInsure-Web/pull/151/commits

라이브러리 선택

windos scroll - 웹 페이지의 전체 창(window)을 스크롤하는 것을 의미

react-window
window scroll 지원 X
동적 높이 지원 X

react-virtualized
window scroll 지원 X
번들사이즈가 큼

react-virtuoso
window scroll 지원
동적 높이 지원
작은 번들 사이즈

react-virtuoso 사용

https://virtuoso.dev/

npm install react-virtuoso

1. page flattening -> 각 page별 값을 들고오기 때문에 하나의 배열로 만들어줌
2. flattening한 데이터를 virtuoso로 렌더링

import { Virtuoso } from 'react-virtuoso';

const questionItems = questionQuery.data?.pages.flatMap((page) => page.content) || []; // page flattening

...

	<Virtuoso
       useWindowScroll
       style={{
          height: '100vh',
       }}
       data={questionItems}
       itemContent={(pageIndex, q) => {
        return (
           <QListItem key={pageIndex}>
              <QuestionAnswer key={pageIndex} question={q.question} answer={q.answer} tags={q.links} />;
           </QListItem>
            );
       }}
    />

결과

DOM

초기상태

적용 후

보이는 영역의 데이터만 렌더링

lightHouse 분석

초기 상태

적용 후

TBT ( Total Blocking Time ) 약 42% 감소
TBT : 사용자가 웹 페이지를 로드하는 동안 인터랙션을 할 수 없는 시간.
TBT는 주로 페이지 로드 중 스크립트 실행, 렌더링, 또는 기타 작업으로 인해 UI가 차단되는 시간을 측정

메모리

적용 전과 비교했을 때 메모리가 단축되었음을 확인할 수 있음.

참고자료

가상화 적용 블로그