Post

브라우저 렌더링 과정

Posted
Preview Image
By nicejmp1 10 min read

브라우저 렌더링 과정

안녕하세요! 오늘은 브라우저 렌더링 과정에 대해 알아보도록 하겠습니다.
브라우저가 웹페이지를 렌더링하는 과정은 여러 단계로 이루어져 있으며, 이 단계들은 웹페이지를 사용자에게 표시할 수 있도록 하는 중요한 역할을 합니다. 아래는 브라우저의 렌더링 과정을 단계별로 정리한 내용입니다.

HTML 파싱 및 DOM 트리 생성

브라우저가 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성합니다. DOM은 HTML 요소의 계층적 구조를 표현한 객체 모델입니다.

간한 예시를 보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!-- 간단한 HTML 예시 -->
<html>
<head>
    <title>Sample Page</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <p>Welcome to the web.</p>
</body>
</html>

Document
 ├── html
      ├── head
      │    └── title
      └── body
           ├── h1
           └── p

CSS 파싱 및 CSSOM 트리 생성

CSS 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다. CSSOM은 스타일 규칙과 해당 규칙이 적용될 요소를 나타냅니다.

간단한 예시를 보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

/* 간단한 CSS 예시 */
body {
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

CSSStyleSheet
 ├── Rule1: body { background-color: #f0f0f0; }
 └── Rule2: h1 { color: #333; }

렌더 트리 생성

DOM 트리와 CSSOM 트리를 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 화면에 표시될 요소만 포함하고, display: none 등의 스타일 규칙이 적용된 요소는 제외됩니다. 각 렌더 트리 노드는 레이아웃 및 그리기 정보를 포함합니다.

간단한 예시를 보도록 하겠습니다.

1
2
3
4

 RenderTree
 ├── RenderBody (body)
 ├── RenderBlock (h1)
 └── RenderBlock (p)

레이아웃(Reflow)

렌더 트리 노드들의 위치와 크기를 계산합니다. 이 과정을 레이아웃 또는 리플로우(reflow)라고 합니다.

간단한 예시를 보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

body {
    background-color: #f0f0f0;
    margin: 8px;
}

h1 {
    color: #333;
    font-size: 24px;
    margin: 10px 0;
}

p {
    font-size: 16px;
}

페인트(Painting)

레이아웃 정보를 기반으로 각 렌더 트리 노드를 실제 픽셀로 변환하는 작업을 진행합니다. 배경색, 텍스트, 그림자 등 다양한 스타일 요소를 그립니다.

컴포지팅 (Compositing)

레이어를 병합하여 화면에 표시할 최종 이미지를 생성합니다. 모든 레이어가 병합되어 최종적으로 GPU가 화면에 표시합니다.

브라우저 렌더링이 어떤식으로 진행되는지 좀 더 자세하게 알아보도록 하겠습니다.

렌더링 엔진과 자바스크립트 엔진의 역할

렌더링 엔진 (Rendering Engine)

  • 렌더링 엔진은 웹 페이지를 사용자에게 시각적으로 표시하는 책임이 있습니다.
  • 크롬과 같은 브라우저에서는 Blink 렌더링 엔진을, 파이어폭스에서는 Gecko 엔진을 사용합니다.

자바스크립트 엔진 (JavaScript Engine)

  • 자바스크립트 엔진은 웹 페이지에서 자바스크립트 코드를 실행합니다.
  • 크롬 브라우저는 V8 자바스크립트 엔진을, 파이어폭스는 SpiderMonkey를 사용합니다.

여기서 렌더링엔진이 어떤 과정을 거치는지 중요 단계에 대해 알아보도록 하겠습니다.

렌더링 과정의 주요 단계

네비게이션과 리소스 가져오기 (Navigation and Fetching)

  • 브라우저는 사용자가 URL을 입력하거나 링크를 클릭했을 때 네비게이션을 시작합니다.
  • DNS 조회, TCP 핸드셰이크, TLS 연결 설정을 수행하고 서버에서 HTML 문서를 가져옵니다.
  • HTML을 가져오는 동안 브라우저의 프리로더(Preloader)는 HTML에서 참조하는 CSS, JavaScript, 이미지 등의 리소스를 백그라운드에서 가져옵니다.

HTML 파싱과 DOM 트리 생성 (HTML Parsing and DOM Tree Construction)

  • 브라우저는 HTML 파일을 파싱하여 DOM 트리를 구축합니다.
  • html, head, body 등의 HTML 요소를 DOM 노드로 표현합니다.
  • 자바스크립트가 포함된 script 태그를 만나면 자바스크립트 코드를 실행합니다.

CSS 파싱과 CSSOM 트리 생성 (CSS Parsing and CSSOM Tree Construction)

  • HTML에서 참조하는 CSS 파일을 파싱하여 CSSOM 트리를 생성합니다.
  • 이 트리는 각 요소에 적용될 스타일 규칙을 나타냅니다.

Render Tree 생성 (Render Tree Construction)

  • DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다.
  • 렌더 트리는 화면에 표시될 요소만 포함하고, display: none 등의 요소는 제외됩니다.
  • 각 렌더 트리 노드에는 레이아웃과 페인트 정보를 담고 있습니다.

레이아웃 (Layout/Reflow)

  • 렌더 트리 노드들의 위치와 크기를 계산합니다.
  • 이를 레이아웃 또는 리플로우라고 하며, 화면에 표시될 정확한 위치를 정합니다.

페인팅 (Painting)

  • 렌더 트리 노드의 스타일을 기반으로 화면에 표시할 내용을 그립니다.
  • 배경색, 테두리, 그림자, 텍스트 등의 요소를 그립니다.
  • 페인팅 단계의 결과물은 여러 개의 페인트 레이어(Paint Layers)로 분할됩니다.

컴포지팅 (Compositing)

  • 각 페인트 레이어를 하나로 합쳐 최종 이미지를 생성합니다.
  • 최종 이미지는 GPU를 사용하여 화면에 표시됩니다.

최종적으로 요약하면 다음 과 같습니다.

첫번째로 웹페이지에 접속 하였을때 브라우저는 파싱 단계로, HTML파일과 CSS 파일을 파싱하여 각각 트리를 만듭니다. HTML 파일을 해석하여 DOM 트리를 구성하고, 파싱 중 HTML에 CSS가 포함되어 있다면 CSSOM 트리 구성 작업도 함께 진행 합니다.

두번째는 스타일(style)단계로, 두 트리를 결합하여 렌더 트리를 만듭니다. Render 트리는 화면에 보여질 내용만 포함하기 때문에 display:none 과 meta teg 같은 화면에 보이지 않는 것들은 포함되지 않습니다.

세번째는 layout단계로, Render 트리를 화면에 어떻게 배치해야 하는지 노드의 정확한 위치와 크기를 계산합니다.

네번째는 paint(페인팅) 단계로, 계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고 레이어를 만듭니다.

마지막으로 컴포지팅 단계로, 레이어를 합성하여 실제 화면에 나타냅니다.

오늘은 브라우저 렌더링 과정에대해 알아보았는데요! 다음 시간에는 더 유익한 내용을으로 찾아뵙겠습니다.

다음시간에 계속…

image

javascript
javascript
This post is licensed under CC BY 4.0 by the author.