브라우저 렌더링 원리 (CRP) 알아보기

우리가 주소창에 google.com을 치고 엔터(Enter)를 누르는 순간부터, 화면에 하얀 검색창이 뜨기까지 브라우저 내부에서는 무슨 일이 일어날까요? 이 과정을 **Critical Rendering Path (CRP)**라고 합니다. 웹 성능 최적화는 결국 이 CRP 과정을 얼마나 효율적으로 줄이느냐의 싸움입니다.

1. DOM & CSSOM 생성 (Parsing)

• DOM(Document Object Model): 브라우저는 HTML 파일을 받아서 태그를 하나하나 해석(Parse)하여 트리 구조의 객체 모델을 만듭니다.
• CSSOM(CSS Object Model): CSS 파일을 파싱하여 스타일 정보를 담은 트리를 만듭니다.

2. Render Tree 구축 (Style)

DOM과 CSSOM을 결합합니다. 이때 중요한 점은 "화면에 보이지 않는 요소(display: none)"는 렌더 트리에 포함되지 않는다는 것입니다. (반면 visibility: hidden은 포함됩니다. 공간은 차지하니까요!)

3. Layout (Reflow)

렌더 트리의 각 노드들이 화면 어디에, 어떤 크기로 배치되어야 할지 계산합니다. 뷰포트(Viewport) 크기에 따라 상대적인 위치(%)가 픽셀(px) 단위로 변환됩니다. 브라우저 창 크기를 조절하면 이 Layout 과정이 다시 일어나는데, 이를 Reflow라고 하며 성능에 큰 영향을 줍니다.

4. Paint (Repaint)

계산된 위치에 픽셀을 채워 넣습니다. 색상, 그림자, 텍스트 등이 그려집니다. background-color 같은 속성만 바꾸면 Layout은 건너뛰고 Paint만 발생하므로 빠릅니다.

5. Composite Layers

생성된 여러 레이어들을 최종적으로 합성하여 화면에 표시합니다. transform: translateZ(0) 같은 속성을 쓰면 별도의 레이어로 분리되어 GPU 가속을 받을 수 있습니다.

성능 최적화 포인트

1. Reflow 줄이기: 요소의 크기나 위치를 바꾸는 애니메이션(width, left 등) 대신, Composite 단계만 건드리는 transform, opacity를 사용하세요. 이것들은 Layout과 Paint를 건너뛰고 GPU가 처리하므로 훨씬 부드럽습니다.
2. HTML/CSS 구조 단순화: DOM이 너무 깊거나 CSS 선택자가 복잡하면 파싱 속도가 느려집니다.
3. 불필요한 렌더링 방지: React.memo나 useMemo 등을 사용해 가상 DOM 비교 비용을 아끼는 것도 이 원리입니다.

브라우저가 붓을 덜 들게 하는 것이 프론트엔드 성능 최적화의 핵심입니다.