[Study] 웹 브라우저 동작 원리

브라우저의 기본 동작 원리

사용자가 URL을 통해 1. 웹 페이지에 접속하면, 브라우저는 2. DNS(Domain Name System) 서버를 통해 도메인 이름을 IP 주소를 변환한다. 이 IP 주소를 통해 3. 서버와 연결한다. 브라우저는 설정된 연결을 통해 웹 페이지의 4. HTML 문서 요청하고, 이를 받아온다.

그러면 렌더링 엔진은 HTML과 CSS, JavaScript를 파싱(Parsing)하고 그 결과물을 바탕으로 페이지를 그려내는 역할을 한다.

 

HTML, CSS, JavaScript의 브라우저에서의 렌더링 원리

1. HTML 파싱 및 DOM(Document Object Model) 생성

• 파싱은 문서의 텍스트를 분석하여 의미 있는 구조로 변환하는 과정이다.
• 브라우저는 HTML의 문자열들을 파싱하여 파스 트리(Parse Tree)를 생성한다.
• 브라우저는 이 파스 트리를 이용해 DOM 트리를 생성한다.

2. CSS 파싱 및 CSSOM(CSS Object Model) 생성

• 일반적으로 CSS는 HTML 문서 내에 링크되어 있어, HTML 파싱 진행 도중에 CSS 파싱이 함께 시작된다.
• 브라우저는 이 CSS를 파싱하여 CSSOM을 생성한다.

3. DOM과 CSSOM을 결합하여 렌더 트리(Render Tree) 생성

• 렌더 트리는 화면에 실제로 그려질 요소들만 포함한다. 예를 들어, display: none; 처리가 된 요소는 렌더 트리에 제외된다.

4. 레이아웃(Layout) 계산

• 레이아웃 계산은 페이지의 각 요소가 화면에서 어디에 배치될지를 결정한다.
• 브라우저는 생성된 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산한다.
• 이 단계를 레이아웃(Layout) 또는 모질라에서는 Reflow라고 부른다.
• 레이아웃 단계를 시각적으로 잘 나타낸 영상

 

5. 페인트(Paint)

• 레이아웃 계산이 끝난 후, 각 요소를 화면에 그리기 위한 페인팅(Painting)이 진행된다.
• 이 단계에서는 요소의 색상, 배경, 텍스트, 그림자 등을 실제 화면에 렌더링합니다.

6. 컴포지팅(Compositing)

• 컴포지팅은 페인트된 레이어는 여러 개의 화면 레이어로 나눠지며, 이 레이어들을 합성하여 최종적으로 화면에 표시하는 과정이다.
• 예를 들어, z-index가 낮은 요소를 먼저 높고, 그 다음에 높은 요소를 놓는 것이다.

 

---

요약

서버로부터 받아온 HTML을 파싱하여 DOM을 생성하고, CSS를 파싱하여 CSSOM을 생성합니다.

브라우저는 이를 결합하여 렌더 트리를 생성하게 됩니다.

그 후, 레이아웃을 계산하여 요소의 크기와 위치를 결정하고, 페인팅 과정을 통해 요소의 색상, 텍스트 등을 처리합니다.

마지막으로 레이아웃을 결합하는 컴포지팅 과정을 통해 최종 화면을 렌더링합니다.