브라우저 렌더링 과정의 이해

웹페이지가 브라우저에 표시될 때, 브라우저는 여러 단계를 거쳐 렌더링(Rendering) 을 수행합니다. 이 과정을 이해하면 웹 성능 최적화에 도움이 됩니다.

🌐 1. 리소스 로딩 및 연결

URL 입력 및 IP 주소 확인
- 사용자가 주소창에 URL을 입력하거나 링크를 클릭합니다.
- 브라우저는 DNS 조회를 통해 도메인 이름을 서버의 IP 주소로 변환합니다.
서버 연결 및 파일 다운로드
- 브라우저는 해당 IP 주소를 가진 서버와 TCP 연결을 맺습니다. (HTTPS의 경우 TLS 핸드셰이크 추가)
- 연결이 수립되면 브라우저는 서버에 HTTP 요청(Request) 을 보내고, 서버는 응답으로 HTML 파일을 보내줍니다.

HTML 파싱 → DOM 트리 생성
- 브라우저는 다운로드한 HTML 문서를 한 줄씩 읽어 파싱(Parsing) 하고, 이를 기반으로 Document Object Model 트리라는 객체 모델을 만듭니다. 이 트리는 HTML 문서의 구조를 나타냅니다.
```
<html>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>
```
→
```
DOM 트리
├─ html
│  └─ body
│     ├─ h1
│     └─ p
```
CSS 파싱 → CSSOM 트리 생성
- HTML을 파싱하다가 <link> 태그 등을 만나면 CSS 파일을 요청하고, 그 내용을 파싱하여 CSSOM(CSS Object Model) 트리를 만듭니다. 이 트리는 문서의 스타일 규칙을 나타냅니다.
```
h1 { color: blue; }
p { font-size: 16px; }
```
DOM + CSSOM → 렌더 트리 생성
- DOM 트리와 CSSOM 트리를 결합하여 렌더 트리(Render Tree) 를 생성합니다.
- 렌더 트리는 실제로 화면에 표시될 요소들만 포함합니다. 예를 들어, display: none; 스타일이 적용된 요소는 렌더 트리에서 제외됩니다.
```
렌더 트리
├─ h1 (color: blue)
└─ p (font-size: 16px)
```

레이아웃 (Layout 또는 Reflow)
- 렌더 트리를 기반으로 각 요소가 화면의 **어디에(위치), 얼마만큼(크기)**의 공간을 차지할지 계산합니다.
페인팅 (Painting)
- 계산된 레이아웃을 바탕으로 각 요소를 실제 픽셀로 변환합니다. 텍스트, 색상, 이미지, 그림자 등 시각적인 부분을 그리는 단계입니다.
합성 (Compositing)
- 페인팅된 여러 레이어(layer)를 순서에 맞게 조합하여 최종적으로 화면에 표시합니다. 스크롤이나 애니메이션 시, 특정 요소를 별도의 레이어로 분리하면 성능을 향상시킬 수 있습니다.

Critical Rendering Path 최적화: 화면이 처음 그려지는 데 필수적인 리소스(HTML, CSS, JS)의 로딩과 처리를 최적화합니다. CSS는 <head>에, JS는 defer나 async 속성을 사용하여 렌더링 차단을 최소화합니다.
레이아웃과 페인팅 최소화: transform, opacity 속성처럼 레이아웃(Reflow)을 유발하지 않는 CSS 속성을 사용하면 성능에 유리합니다.
Lazy Loading: 화면에 보이지 않는 이미지나 비디오 등은 사용자가 스크롤하여 해당 위치에 도달했을 때 로드하여 초기 로딩 속도를 높입니다.