올영, Infinite Scroll로 렌더링 성능 UP!

Infinite Scroll 기법을 통해 브라우저 렌더링 최적화를 시도함

React 기반 온라인몰에 Infinite Scroll 직접 구현

FCP/LCP 속도 개선 및 초기 로딩 속도 단축 효과

브라우저 렌더링 과정과 최적화 기법

브라우저는 HTML 파싱 후 DOM 트리와 CSSOM 트리를 결합하여 렌더 트리를 구축한다. Reflow/Repaint 최소화를 위해 absolute/fixed 포지션 활용, will-change 속성 사용 등 다양한 최적화 기법을 적용한다. 따라서 렌더링 성능 향상을 위해 렌더링 과정을 이해하는 것이 중요하다.

Infinite Scroll 구현 방식

Infinite Scroll은 현재 보이는 영역만 렌더링하여 초기 로딩 속도를 개선한다. 스크롤 이벤트 발생 시 필요한 엘리먼트를 추가하는 방식으로 구현하며, react-infinite-scroll-component와 같은 라이브러리를 활용할 수 있다. 결과적으로 대량 데이터 처리에 효과적이다.