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

이 글은 올리브영 프론트엔드 개발자가 온라인몰 성능 개선을 위해 Infinite Scroll을 활용한 브라우저 렌더링 최적화 방법을 공유합니다. 글에서는 먼저 사용자가 웹사이트에 접속했을 때 브라우저가 HTML을 파싱하고 DOM 트리, CSSOM 트리를 생성하며, 이를 결합해 렌더 트리를 구축하는 과정을 설명합니다.

이후 렌더 트리를 기반으로 레이아웃을 계산하는 배치 과정과 화면에 그리는 페인팅 과정까지, 브라우저 렌더링의 네 단계를 상세히 소개합니다. 마지막으로 Reflow/Repaint를 최소화하고 레이아웃 변화에 영향을 받는 노드를 줄이는 것이 성능 개선의 핵심임을 강조하며, Infinite Scroll이 이러한 최적화에 어떻게 기여할 수 있는지에 대한 논의를 예고합니다.