우리가 작성한 코드가 브라우저 화면에 픽셀로 변환되어 나타나기까지의 복잡한 여정, ‘중요 렌더링 경로(CRP)’의 단계별 메커니즘을 분석한다.
렌더 트리의 생성 단계
- DOM/CSSOM 생성: HTML과 CSS를 각각 트리 구조의 객체 모델로 파악한다.
- Render Tree 결합: 화면에 실제로 표시될 요소들로만 구성된 트리를 구축한다.
수치 계산과 출력 (Layout & Paint)
- Layout (Reflow): 각 요소가 화면의 정확히 어느 위치에, 어떤 크기로 배치될지 기하학적 수치를 계산한다.
- Paint (Repaint): 계산된 수치를 바탕으로 실제 색상을 입히고 화면에 픽셀을 출력한다.
성능 최적화 전략
브라우저의 연산 부담을 줄이기 위해서는 불필요한 리플로우를 최소화해야 한다.
기하학적 속성 변경 대신 GPU 가속을 활용하는 속성(transform, opacity)을 사용하는 것이 성능 최적화의 핵심이다.
P.S
웹 페이지는 정적인 문서가 아니라 브라우저라는 엔진이 실시간으로 그려내는 결과물이다.
렌더링 흐름을 이해하고 코드를 작성하는 것이 고품질 사용자 경험(UX)의 시작점인 것 같다.
