[CS] 브라우저의 렌더링 과정

y_flm 2025. 4. 14. 07:40

2025. 4. 14. 07:40

브라우저의 렌더링 과정은 웹 개발자라면 필수적으로 알아야 할 지식 중 하나이다!

간단히 말하자면, 우리가 작성한 HTML / CSS / JS를 브라우저가 화면에 그리는 과정을 말한다.

쉽게 이해해보기 위해서 요리하는 과정에 비유하여 설명해보자면 다음과 같다.

📄 HTML: 요리 레시피
🎨 CSS: 플레이팅 / 장식
⚙️ JavaScript: 자동 조리 기계 (동작 / 인터랙션)
🧑🏻‍🍳 브라우저: 요리사 (렌더링 엔진)

그럼 이제 단계별로 렌더링 과정을 알아보자!

1단계: HTML 파싱 ➡️ DOM 트리 생성

먼저 HTML 문서를 파싱하여 태그들을 DOM(Document Object Model) 트리 구조로 변환해준다.

[💡 개념 알고가기 !]
1. 파싱(Parsing)이란? ➡️ "문자 덩어리를 구조로 바꾸는 과정"
- 브라우저는 처음 HTML 문서를 처음 받으면 그냥 글자들로 보여진다.
그렇기 때문에 화면에 보여주기 위해서는 구조를 알아야하는데,
예를 들어 "<h1>은 제목이고, <p>는 단락이구나."와 같이 의미를 해석하는 작업이 필요한데 이를 파싱이라고 한다.

2. DOM(Document Object Model)이란? ➡️ "HTML을 트리 구조로 표현한 것"
- 만약 HTML 문서에 <h1>안녕하세요</h1>라고 저장되어있다면, 내부적으로는 아래와 같은 구조로 바뀌게 된다.
Document > h1 > "안녕하세요"
DOM은 웹 페이지의 뼈대 구조라고도 할 수 있다.

[예시]

<body>
  <h1>브라우저의 렌더링 과정</h1>
  <p>HTML 문서 파싱</p>
  <p>DOM 트리 생성</p>
</body>

⬇️

2단계: CSS 파싱 ➡️ CSSOM 트리 생성

DOM 트리와 마찬가지로 style 태그나 .css 파일을 파싱하여 CSSOM(CSS Object Model) 트리를 구축한다.

[💡 개념 알고가기!]
1. CSSOM(CSS Object Model)이란? ➡️ "CSS를 트리 구조로 정리한 것"
- CSS도 처음에는 그냥 텍스트이기 때문에 브라우저가 파싱해서 구조화해야하는데, 이를 CSSOM이라고 한다.
만약 HTML에서 <h1>를 빨간색 폰트로 지정했다면 "h1이라는 요소는 빨간색 글자"라고 저장해놓는 객체 구조이다.

[예시]

<body style="font-size: 10px;">
  <h1 style="font-size: 20px;">브라우저의 렌더링 과정</h1>
  <p style="color: red;">HTML 문서 파싱</p>
  <p style="display: none;">DOM 트리 생성</p>
</body>

⬇️

3단계: DOM + CSSOM = Render 트리 생성

DOM 트리와 CSSOM 트리를 결합하여 Render 트리를 구축하는데, Render 트리는 화면에 표시될 요소들만 포함하여 생성한다.

위에서 보여줬던 예시 DOM 트리와 CSSOM 트리를 결합하여 Render 트리를 생성하게 된다면 아래와 같은 트리가 완성된다.

* display: none 스타일이 적용되어있는 <p>DOM 트리 구축</p> 부분은 실제 화면에 보여지지 않기 때문에 제외된다.

4단계: Layout (Reflow)

Layout 단계에서는 각 요소의 위치와 크기를 계산한다.

예를 들어, "버튼은 화면의 왼쪽 여백이 20px이고, 너비는 100px이다."와 같이 계산하게 된다.

5단계: Painting (Repaint)

Painting 단계에서는 Layout 단계에서 계산된 요소의 위치와 크기를 픽셀 단위로 화면에 그린다.

[💡 개념 알고가기 !]
1. Reflow란? ➡️ "요소의 위치나 크기 변경되었을 때 발생"
예를 들어, 요소의 크기(width, height)나 위치(margin, position, display 등)가 변경되면
전체 레이아웃을 다시 계산해야하기 때문에 리플로우가 발생한다.

리플로우는 비용이 큰 작업이며, 발생 시 변경된 요소 뿐만 아닌 연관된 다른 요소도 다시 계산될 수 있다.
또한, 리플로우가 발생하면 자동적으로 리페인트로 발생하기 때문에 DOM 구조나 스타일을 자주 바꾸는 것은
성능 저하의 원인이 될 수 있다는 점을 명시해야한다.

2. Repaint란? ➡️ "요소의 시각적인 스타일만 변경되었을 때 발생"
배경색을 변경한다던지 글자색을 변경하는 등의 시각적인 스타일만 변경될 경우,
브라우저는 위치나 크기를 다시 계산하지 않고 화면에 그리는 작업만 다시 수행하는데, 이를 리페인트라고 한다.

리플로우에 비해 상대적으로 가벼운 작업이지만 이 또한 빈번하게 발생하면 성능에 영향을 줄 수 있다.

그렇다면 JavaScript 코드는 언제 실행될까? 🤔

기본적으로 HTML 파싱 중에 <script>를 만나면 바로 실행된다!

<body>
  <h1>안녕!</h1>
  <script src="main.js"></script>
  <h1>반가워요!</h1>
</body>

하지만 위의 코드에서는 DOM을 다 생성하기 전에 실행되므로 '안녕'이 아닌 null이 출력될 수 있다.

그래서 원하는 타이밍에 맞게 자바스크립트를 실행할 수 있도록 조절해야한다.

1. 기본 <script> (동기 실행)

위에서 말했듯이 기본적으로 파싱 중에 <script>를 만나면 파싱이 중단되고 JS가 실행된다.

한마디로 동기적으로 실행되는 것인데, 그렇기 때문에 <script>의 위치에 따라 실행되는 타이밍이 달라진다.

<head>안에 <script> 사용

<head>
  <script src="main.js"></script>
</head>
<body>
  <h1>안녕!</h1>
  <h1>반가워요!</h1>
</body>

이 경우 스크립트 파일을 전부 불러올 때 까지 body 파싱을 멈추기 때문에 브라우저의 초기 렌더링이 느려진다.

그렇게 되면 스크립트 파일에 따라 사용자가 빈 화면을 보고있는 시간이 길어질 수 있기 때문에 좋지않은 방식이다.

<body> 중간에 <script> 사용

<body>
  <h1>안녕!</h1>
  <script src="main.js"></script>
  <h1>반가워요!</h1>
</body>

중간에 스크립트를 사용하면 body 파싱 중에 script를 만나기 때문에 그 다음 요소들은 파싱되지 않고,

스크립트 파일이 전부 실행될 때까지 파싱이 멈추게 된다.

<body> 끝에 <script> 사용

<body>
  <h1>안녕!</h1>
  <h1>반가워요!</h1>
  <script src="main.js"></script>
</body>

마지막에 스크립트를 사용하게 되면 이미 위에 요소들을 전부 파싱한 후 실행되는 것이므로 DOM을 조작하기에 안정적인 시점이다.

2. defer 사용

<head>
  <script src="main.js" defer></script>
</head>

defer를 사용하면 script 파일은 HTML 파싱이 끝날 때까지 기다렸다가 실행된다.

따라서 DOM이 완성된 후에 실행되고 순서도 보장할 수 있다.

대부분 head안에 <script defer>로 사용한다.

3. async 사용

<head>
  <script src="main.js" async></script>
</head>

많이 보는 async는 비동기적으로 실행된다.

script 파일을 불러오는 동안 HTML을 파싱하고 다 불러와지면 바로 스크립트가 실행된다.

이렇게 비동기적으로 실행되기 때문에 순서를 보장할 수 없다.

[요약]

방식	실행 시점	HTML 파싱 중단 여부	순서 보장
<head>에 <script> 사용	즉시 실행	⭕️	⭕️
<body> 중간에 <script> 사용	즉시 실행	⭕️	⭕️
<body> 끝에 <script> 사용	즉시 실행	❌	⭕️
defer 사용	파싱이 완료된 후 실행	❌	⭕️
async 사용	다운로드 완료 후 즉시 실행	실행 시 중단	❌

[브라우저 렌더링 과정] 최종 요약 ⭐️

'공부 > CS' 카테고리의 다른 글

[CS] MPA vs SPA (프론트엔드 구조 알아보기 🔍) (0)	2025.04.18
[CS] CSR vs SSR vs SSG (웹 페이지 렌더링 방식 정리 🔍) (0)	2025.04.16
[CS] 쿠키 vs 세션 vs 로컬 스토리지 (0)	2025.04.15
[CS] HTTP(Hyper Text Transfer Protocol)란? (0)	2025.04.14
[CS] 프로토콜(Protocol)이란? (Feat. OSI 7계층) (0)	2025.04.14

y_flm's Blog