브라우저 렌더링 방식

우리가 URL을 입력하면 브라우저는 마법처럼 화려한 웹 페이지를 보여준다. 하지만 그 과정은 생각보다 훨씬 복잡하다. HTML, CSS, JavaScript라는 텍스트 파일이 어떻게 우리 눈에 보이는 픽셀로 변환되는지, 그 과정을 하나씩 뜯어보자.

1. 브라우저 렌더링의 전체 흐름

브라우저가 화면을 그리는 과정은 크게 5단계로 나뉜다. 이 과정을 **렌더링 파이프라인(Rendering Pipeline)**이라고 부른다.

스크린샷 2022-04-01 오후 9.11.02.png

전체 흐름:

서버 요청 → 파싱(Parsing) → 렌더 트리 구축(Render Tree) → 레이아웃(Layout) → 페인트(Paint) → 컴포지팅(Composite) → 화면 표시

마치 건물을 짓는 것과 비슷하다고 생각하면 쉽다. 설계도를 보고(파싱), 어떤 재료가 필요한지 정리하고(렌더 트리), 각 방의 위치와 크기를 결정하고(레이아웃), 벽에 페인트를 칠하고(페인트), 마지막으로 여러 층을 쌓아 올려(컴포지팅) 완성된 건물을 보는 것이다.

1-1) 파싱(Parsing) - HTML과 CSS를 이해하기

브라우저가 가장 먼저 하는 일은 서버로부터 받은 HTML과 CSS 파일을 "읽어내는" 것이다. 하지만 브라우저는 우리처럼 텍스트를 바로 이해하지 못한다. 텍스트를 브라우저가 이해할 수 있는 자료구조로 변환해야 하는데, 이 과정을 **파싱(Parsing)**이라고 한다.

HTML 파싱: DOM(Document Object Model) 트리 생성

브라우저는 HTML을 한 줄씩 읽어내려가며 DOM이라는 트리 구조를 만든다.

HTML 원시 바이트 → 문자 변환 → 토큰화 → 노드 생성 → DOM 트리 구축

예를 들어 이런 HTML이 있다고 해보자:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

브라우저는 이걸 트리 구조로 변환한다:

Document
  └─ html
      ├─ head
      │   └─ title
      │       └─ "My Page"
      └─ body
          ├─ h1
          │   └─ "Hello"
          └─ p
              └─ "World"

DOM은 단순히 HTML을 표현하는 것이 아니라 JavaScript가 HTML 요소를 조작할 수 있도록 하는 인터페이스 역할을 한다. document.querySelector() 같은 메서드가 바로 DOM API다.