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

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

이어서 Reflow/Repaint를 최소화하고 레이아웃 변화에 영향을 받는 노드를 줄이는 것이 렌더링 최적화의 핵심임을 강조하며, Infinite Scroll이 이러한 최적화에 어떻게 기여할 수 있는지에 대한 논의를 예고합니다. Part-1에서는 최적화의 필요성과 브라우저 렌더링 과정에 대한 이해를 돕는 데 초점을 맞추고 있습니다.