🌐 11. 브라우저는 HTML을 어떻게 화면에 그릴까? 렌더링 과정 제대로 이해하기

JM_Dev·2025년 4월 25일

CSSOM DOM reflow repaint()개발자기록 렌더링 브라우저 동작원리 웹개발 프론트엔드

개발자가 되어가는 걸음

목록 보기

11/81

프론트엔드를 공부하면서 가장 많이 듣는 말 중 하나는
“브라우저 렌더링 과정을 알아야 성능 최적화를 잘할 수 있다”는 것.
이번엔 정말 처음부터 끝까지 브라우저가 어떻게 HTML을 화면에 보여주는지 정리해봤다.

✅ 전체 렌더링 흐름 한눈에 보기

HTML → 파싱 → DOM Tree
     + CSS → CSSOM Tree
             ↓
        Render Tree 생성
             ↓
       Layout (Reflow)
             ↓
       Paint (Repaint)
             ↓
        Composite (합성)

✅ 1. DOM Tree 생성

브라우저는 HTML을 파싱하면서 노드 기반의 구조화된 트리, 즉 DOM(Document Object Model)을 만든다.

<body>
  <h1>Hello</h1>
  <p>World</p>
</body>

이런 구조는 다음과 같은 형태의 DOM Tree로 바뀐다.

- body
  ├── h1
  └── p

✅ 2. CSSOM Tree 생성

CSS는 별도로 파싱되어 CSSOM (CSS Object Model)이라는 트리 구조로 만들어진다.
이 트리는 DOM처럼 CSS의 계층적 관계를 표현한다.

h1 {
  color: red;
}

✅ 3. Render Tree 생성

DOM Tree + CSSOM Tree가 결합되어 화면에 실제 그려질 요소만 추려낸 Render Tree가 만들어진다.

display: none 요소는 포함되지 않는다.
시각적인 요소 위주로 구성된다.

✅ 4. Layout 단계 (Reflow)

Render Tree의 각 요소가 어디에 위치할지, 얼마나 크기를 가질지 계산하는 과정이다.
이걸 흔히 Reflow라고 부른다.

브라우저 창 크기가 바뀌거나
폰트 사이즈가 변경되거나
DOM이 동적으로 추가되면 발생함

✅ 5. Paint & Composite 단계

Paint: 계산된 위치에 실제 픽셀을 채움 (색상, 그림자, 테두리 등)
Composite: 여러 레이어로 나뉜 요소들을 합쳐서 최종 화면에 그림

✅ Reflow vs Repaint vs Composite

단계	설명	성능 영향도
Reflow	위치, 크기 재계산	🔥 높음
Repaint	색상/배경 등 시각 요소만 변경	중간
Composite	레이어 합성	낮음

📝 내가 느낀 점

이전에는 성능 최적화를 말할 때 Reflow를 줄이자, Paint를 최소화하자는 말이
막연하게만 느껴졌는데, 이제는 구조를 이해하니 무엇을 왜 조심해야 하는지 감이 잡힌다.
특히 애니메이션 만들 때 transform이나 opacity를 사용하는 게 괜히 권장되는 게 아니었다는 걸 알게 됐다!