글을 시작하며

웹 개발자로서 브라우저가 어떻게 웹 페이지를 화면에 그리는지 이해하는 것은 매우 중요합니다. 단순히 코드를 작성하는 것을 넘어서, 왜 특정 방식으로 코드를 작성해야 하는지, 어떻게 하면 더 빠른 웹 페이지를 만들 수 있는지를 이해하기 위해서는 브라우저의 렌더링 과정을 깊이 있게 알아야 합니다.

이 글에서는 브라우저가 HTML, CSS, JavaScript를 받아서 화면에 표시하는 과정을 단계별로 살펴보겠습니다.

브라우저 렌더링 과정

브라우저가 웹 페이지를 화면에 그리는 과정은 다음과 같은 단계로 이루어집니다.

1. HTML 파싱과 DOM 트리 생성

브라우저는 HTML 문서를 위에서 아래로 읽으며 DOM(Document Object Model) 트리를 생성합니다. DOM은 HTML의 계층 구조를 트리 형태로 변환한 것입니다.

<!doctype html>
<html>
  <head>
    <title>렌더링 과정</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

이 HTML은 다음과 같은 DOM 트리로 변환됩니다

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

2. CSS 파싱과 CSSOM 트리 생성

CSS 파일이 로드되면 브라우저는 이를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다. 이 과정에서 CSS 규칙이 DOM 요소에 어떻게 적용되는지를 결정합니다.

h1 {
  color: blue;
  font-size: 24px;
}

CSSOM 트리는 다음과 같습니다

CSSOM
 ├── h1
      ├── color: blue
      ├── font-size: 24px

3. 렌더 트리(Render Tree) 생성

렌더 트리는 DOM과 CSSOM을 결합하여 화면에 표시될 요소만 포함하는 구조입니다.

실제로 화면에 그려질 요소만 포함
- visibility : hidden - 요소가 공간을 차지하고 보이지만 않기 때문에 Tree에 포함
- display : none - Tree 에서 제외

4. 레이아웃 (Layout/Reflow)

브라우저는 각 요소의 크기와 위치를 계산하여 배치합니다. 이 과정에서 뷰포트 크기와 상대적인 요소 위치 등이 고려됩니다.

레이아웃을 트리거하는 속성들:

width/height
margin/padding
border
font-size

5. 페인트 (Paint)

계산된 레이아웃을 기반으로 실제 픽셀을 화면에 그립니다. 이 과정에서는 텍스처, 색상, 그림자 등이 렌더링됩니다

페인트를 트리거하는 속성들:

color
background
box-shadow
border-radius

6. 합성(Compositing)

복잡한 페이지에서는 여러 개의 레이어(layer)로 나뉘어 렌더링됩니다. 브라우저는 이 레이어들을 GPU를 활용하여 빠르게 합성(Composite)하고 최종 화면을 표시합니다.

주의할 점

Layout과 Paint을 다시 실행하는 리렌더링은 비용이 많이 드는, 성능에 악영향을 주는 작업이므로 주의할 필요가 있습니다.
애니메이션 최적화를 하기 위해 transform과 opacity를 활용하여 레이아웃 계산을 최소화할 수 있음
자바스크립트 엔진은 직렬적으로 파싱을 수행하기 때문에 script태그의 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있음

결론

지금까지 브라우저 렌더링 과정에 대해 알아봤습니다.
DOM, CSSOM, Render Tree, Layout, Painting, Compositing 등의 단계를 거쳐 이루어지는 브라우저 렌더링 과정을 이해한다면 웹 성능 최적화에 대한 인사이트를 얻을 수 있으며, 빠르고 부드러운 사용자 경험을 제공할 수 있습니다.

렌더링 최적화 기법을 적극적으로 활용하여 성능이 뛰어난 웹사이트를 만들어보세요! 🚀

브라우저 렌더링 과정 이해하기

웹 개발자로서 반드시 알아야 할 브라우저 렌더링 과정을 살펴보자