2024-03-18

브라우저 동작 원리

1. 사용자의 입력 처리

   • 사용자가 URL을 입력하거나 링크를 클릭하는 등의 동작으로 요청 생성

2. HTTP 요청 처리

   • 브라우저는 해당 요청을 서버로 보냄
   • 서버는 요청을 받아서 처리하고 필요한 리소스(HTML, CSS, JS, 이미지 등)를 응답으로 보냄

3. HTML 문서 파싱

   • 브라우저는 응답으로 받은 HTML 문서를 파싱하여 DOM 트리 생성

4. CSS 문서 파싱

   • CSS 파일을 파싱하여 CSSOM을 생성
   • DOM 트리와 CSSOM을 결합하여 렌더 트리 생성
   • 렌더 트리는 화면에 표시될 요소와 스타일 정포를 포함함

5. 레이아웃(Layout)

   • 브라우저는 렌더 트리를 기반으로 각 요소의 크기와 위치를 계산
   • 이를 토대로 각 요소의 레이아웃을 결정

6. 페인팅(Paint)

   • 브라우저는 레이아웃을 기반으로 화면에 각 요소를 그림

7. 리렌더링 및 리플로우

   • 화면이 변경되거나 요소의 스타일이 변경될 때마다 레이아웃과 페인팅 단계가 다시 실행됨
   • 이때 레이아웃과 페인팅을 다시 수행하는 것을 리플로우라고 함

8. 이벤트 처리

   • 사용자의 상호작용(클릭, 마우스 이동 등)에 따른 이벤트 처리
   • 이벤트 핸들러에 의한 해당 동작에 대한 반응이 화면에 표시

렌더링 엔진

• 렌더링 엔진(Rendering Engine)은 브라우저에서 HTML과 CSS를 파싱하여 화면에 표시하는 역할을 담당하는 핵심 컴포넌트
• 여러 브라우저에서 사용되는 렌더링 엔진에는 Blink(크롬), Gecko(파이어폭스), WebKit(사파리), Trident(구버전 인터넷 익스플로러) 등이 있음

파싱

• 파싱(Parsing)은 주어진 데이터나 문서를 읽고 해석하는 과정
• HTML, CSS, JavaScript 같은 웹 문서나 데이터를 읽어서 브라우저가 이해하고 처리할 수 있는 구조로 변환하는 과정

DOM

• Document Object Model로 문서의 구조를 나타내는 트리 구조

CSSOM

• CSS Object Model로 CSS 내용을 파싱하여 자료를 구조화 한 것

렌더 트리

• 렌더 트리(Render Tree)는 웹 페이지의 레이아웃을 화면에 표시하기 위해 사용되는 구조로 DOM 트리와 CSSOM 트리가 결합된 결과물

Layout

• 뷰포트 내에서 노드의 정확한 위치와 크기를 계산함
• 이것이 바로 'Layout' 단계이며 경우에 따라 'Reflow' 라고도 함

Paint

• 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계에 이러한 정보를 전달함
• 이 단계를 흔히 '페인팅' 또는 '래스터화'라고 합니다.