핵심 요약
올리브영의 FE 개발팀은 브라우저 렌더링 최적화와 Infinite Scroll 커스텀 구현으로 온라인몰의 초기 로딩 속도와 렌더링 효율성을 개선했습니다.
구현 방법
- 렌더링 과정 이해를 바탕으로 Reflow/Repaint 최소화 및 will-change 적용
- Infinite Scroll을 라이브러리 의존 없이 직접 구현해 화면에 보이는 영역의 엘리먼트만 렌더링
- React 전환 기반의 신규 아키텍처에 적용하고 빌드 크기 및 유지보수성을 고려한 설계
주요 결과
- FCP/LCP를 포함한 로딩 소요가 감소했다는 확인
- 스크롤 시 딜레이 현상 개선 가능성 확인
- 커스텀 구현으로 빌드 크기 관리 이점 확인
