[브라우저 렌더링] 초 간단 요약

1. HTML 파싱 (Parsing)

• HTML 다운로드: 서버에서 HTML 파일을 다운로드합니다.
• DOM 생성: 브라우저는 HTML을 파싱하여 **Document Object Model (DOM)**을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현합니다.

2. CSS 파싱

• CSS 다운로드: 브라우저는 HTML 문서에서 참조된 CSS 파일을 다운로드합니다.
• CSSOM 생성: 브라우저는 CSS를 파싱하여 **CSS Object Model (CSSOM)**을 생성합니다. CSSOM은 스타일 규칙을 트리 형태로 표현합니다.

3. Render Tree 생성

• 스타일 적용: 브라우저는 DOM과 CSSOM을 결합하여 Render Tree를 생성합니다. Render Tree는 화면에 표시할 요소와 그 스타일을 포함합니다.
• 무시되는 요소: 예를 들어, display: none으로 설정된 요소는 Render Tree에 포함되지 않습니다.

4. 레이아웃 (Layout)

• 위치와 크기 결정: 브라우저는 Render Tree를 기반으로 각 요소의 위치와 크기를 계산합니다. 이 과정은 Reflow 또는 Layout이라고 불립니다.
• 위치 계산: 요소의 위치와 크기를 기반으로 페이지의 전체적인 레이아웃이 결정됩니다.

5. 페인팅 (Painting)

화면에 그리기: 브라우저는 요소를 실제 화면에 그립니다. 이 단계에서는 요소의 배경, 텍스트, 이미지 등 시각적인 부분이 처리됩니다.

• 렌더링 단계: 브라우저는 각 요소를 레이어로 나누어 그림을 그립니다. 이를 통해 요소의 시각적 표현을 화면에 나타냅니다.

6. 컴포지팅 (Compositing)

• 레이어 결합: 브라우저는 개별 레이어를 결합하여 최종 화면을 만듭니다. 이 단계에서 레이어가 GPU에 의해 합성될 수도 있습니다.
• 최적화: 브라우저는 렌더링 성능을 향상시키기 위해 하드웨어 가속을 사용할 수 있습니다.

7. JavaScript 실행

• 스크립트 실행: HTML이 파싱되는 동안 JavaScript가 실행될 수 있습니다. 스크립트는 DOM과 CSSOM을 수정하거나 새로운 요소를 추가하는 등의 작업을 수행할 수 있습니다.
• 렌더링 차단: 일부 JavaScript는 렌더링을 차단할 수 있으며, 이러한 스크립트는 defer나 async 속성을 사용하여 비동기적으로 로드하거나 실행할 수 있습니다.

 

요약의 요약

1. HTML 파싱: HTML 파일을 다운로드하고 DOM 트리를 생성합니다.
2. CSS 파싱: CSS 파일을 다운로드하고 CSSOM 트리를 생성합니다.
3. Render Tree 생성: DOM과 CSSOM을 결합하여 Render Tree를 만듭니다.
4. 레이아웃: 각 요소의 위치와 크기를 계산합니다.
5. 페인팅: 화면에 요소를 그립니다.
6. 컴포지팅: 레이어를 결합하여 최종 화면을 생성합니다.
7. JavaScript 실행: JavaScript가 실행되면서 DOM을 조작할 수 있습니다.