온라인몰 성능 개선을 위한 FE 개발자의 고민 part-1

브라우저는 HTML을 파싱하여 DOM과 CSSOM 트리를 생성하고, 이를 결합한 Render Tree를 구축한 뒤 레이아웃 계산과 페인팅 과정을 거쳐 화면을 그린다. 이 과정에서 발생하는 Reflow와 Repaint를 최소화하는 것이 성능 최적화의 핵심이다.

Infinite Scroll은 사용자의 뷰포트(Viewport) 내에 보이는 엘리먼트만 우선적으로 렌더링하고, 스크롤에 따라 필요한 데이터만 추가하는 기법이다. 이를 통해 대량의 데이터를 처리할 때 발생하는 클라이언트 자원 소모를 줄일 수 있다.

올리브영 팀은 기존 라이브러리 대신 커스텀 구현 방식을 선택하여 빌드 파일 크기를 줄이고 자유도를 높였다. 적용 결과, **FCP(First Contentful Paint)**와 LCP(Largest Contentful Paint) 등 주요 지표가 개선되어 초기 로딩 속도와 스크롤 반응성을 확보했다.