2026-01-09


브라우저 렌더링 과정

전체 흐름 요약

  1. HTML 파싱 → DOM 생성
  2. CSS 파싱 → CSSOM 생성
  3. DOM + CSSOM → Render Tree
  4. Layout (Reflow)
  5. Paint (Repaint)
  6. Composite

1. HTML 파싱

  • 브라우저가 HTML을 위에서 아래로 읽음
  • 태그를 해석해 DOM 트리(Document Object Model) 생성
  • 중간에 <script>를 만나면
    • 기본적으로 파싱 중단
    • JS 실행 후 다시 파싱 재개
    • 그래서 defer, async가 중요함

2. CSS 파싱

  • CSS 파일을 파싱해 CSSOM(CSS Object Model) 생성
  • 모든 CSS 규칙을 계산해 스타일 정보 구조화

3. Render Tree 생성

  • DOM + CSSOM을 결합해 Render Tree 생성
  • 화면에 실제로 그려질 요소만 포함
    • 레이아웃과 페인팅에 필요한 정보 추출
    • 숨겨진 요소나 비표시 요소 필터링

4. Layout

  • 각 요소의 위치와 크기 계산
  • 뷰포트 기준으로 좌표 확정, 배치 수행
  • 이 단계가 가장 비용이 큼

5. Paint

  • 계산된 레이아웃을 기반으로 픽셀 그리기
  • 색상, 배경, 테두리, 그림자 등 처리

6. Composite

  • 페인트 과정에서 생성된 여러 레이어를 결합해 최종 화면 출력
  • GPU가 관여

관련 용어 정리

  • 파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽고 실행하기 위해 텍스트 문자의 문자열을 분해하고 구조를 생성하는 일련의 과정
  • 렌더링: 브라우저가 HTML, CSS, JavaScript를 파싱해, 우리가 보는 화면에 실제로 나타내는 과정
  • DOM트리: HTML 문서를 계층적으로 표현한 트리 구조
  • CSSOM: CSS를 파싱하여 트리 구조로 표현한 객체 모델

참고자료

results matching ""

    No results matching ""