브라우저 렌더링 과정

• 웹 브라우저가 사용자가 입력한 URL을 기반으로 페이지를 표시하기까지의 과정은 여러 단계로 나뉩니다. 이 과정은 브라우저가 서버에서 요청한 리소스를 받고, 사용자에게 웹 페이지를 렌더링하는 일련의 흐름입니다.

1. URL 입력 및 페이지 요청 (Request)

사용자가 브라우저 주소창에 URL을 입력하면, 브라우저는 이 URL을 해석하여 적절한 웹 서버에 HTTP/HTTPS 요청을 보냅니다.

• DNS(Domain Name System): 브라우저는 URL에 해당하는 도메인 이름을 IP 주소로 변환하기 위해 DNS 서버를 참조합니다.
• HTTP 요청: 변환된 IP 주소를 통해(DNS) 해당 서버로 HTTP/HTTPS 요청을 보냅니다. 이 요청에는 사용자가 보고자 하는 웹 페이지의 URL 정보가 포함되어 있습니다.
• 서버 응답: 웹 서버는 해당 요청을 받아 HTML, CSS, JavaScript, 이미지 등의 파일(File)을 브라우저로 응답합니다.

2. HTML 문서 파싱 (Parsing)

DOM 이란?

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

• 브라우저가 서버로부터 HTML 문서를 받으면 이를 파싱하기 시작합니다. 이 과정에서 브라우저는 HTML 문서를 읽고 DOM(Document Object Model)을 생성합니다.

• DOM 트리: HTML 요소들을 트리 구조로 변환하여 페이지의 논리적인 구조를 표현합니다. 예를 들어 <div>, <p>, <img> 같은 태그들이 DOM 트리의 노드로 추가됩니다.

• CSSOM 트리: HTML에 포함된 스타일(CSS) 정보를 바탕으로 CSSOM(CSS Object Model) 트리를 생성합니다. 이 트리는 DOM 트리와 결합하여 최종 렌더링 트리(Render Tree)가 생성됩니다.

3. 렌더 트리 구성

• DOM과 CSSOM 트리가 모두 완성되면, 브라우저는 이를 결합하여 렌더 트리(Render Tree)를 생성합니다. 렌더 트리는 페이지의 각 요소들이 어떻게 화면에 그려질지 정의한 트리 구조입니다.
  
• 렌더 트리에는 시각적으로 보여질 요소들만 포함됩니다. (예: display: none 처리가 된 요소나 메타데이터는 포함되지 않습니다.)
  이 트리는 페이지 레이아웃과 스타일을 계산하는 데 중요한 역할을 합니다.

4. 레이아웃 계산 (Layout)

• 렌더 트리 생성이 완료되면, 브라우저는 각 요소들의 레이아웃을 계산합니다. 이 단계에서는 각 요소가 페이지 내에서 차지할 위치와 크기를 결정합니다. 이는 CSS 규칙에 기반하여 이루어집니다.

• 예를 들어, 각 요소의 너비, 높이, 마진, 패딩, 위치 정보 등이 이 단계에서 계산됩니다.
  이 과정을 reflow라고도 하며, 레이아웃이 변경되면 브라우저는 이 작업을 다시 수행해야 합니다.

5. 페인팅(Painting)

• 레이아웃이 완료되면, 브라우저는 페이지를 화면에 그리는 작업을 수행합니다. 이를 페인팅(Painting)이라고 하며, 각 렌더 트리의 요소들이 실제 픽셀로 변환되어 화면에 표시됩니다.

• 브라우저는 CSS 스타일과 이미지 리소스를 사용해 페이지의 각 요소를 화면에 그립니다.
  이 과정은 레스터화(rasterization)라고도 불립니다.
  복잡한 페이지는 GPU(그래픽 처리 장치)를 이용해 더 빠르게 페인팅합니다.

6. 자바스크립트 처리 (JavaScript Execution)

• 브라우저는 HTML 파싱 중에 <script> 태그를 만나면 자바스크립트를 실행합니다. 자바스크립트는 브라우저의 JavaScript 엔진(예: V8 엔진)에서 실행됩니다.

• JavaScript 엔진: 브라우저는 자바스크립트 엔진을 사용하여 자바스크립트 코드를 실행하고, DOM을 조작하거나 데이터를 처리합니다.

• 비동기 처리: 자바스크립트는 비동기로 동작할 수 있기 때문에, AJAX 요청이나 이벤트 처리와 같은 작업들은 브라우저가 페이지 렌더링을 계속할 수 있도록 백그라운드에서 처리됩니다.
  자바스크립트는 페이지의 동적 동작을 담당하며, 사용자와의 상호작용에 중요한 역할을 합니다.

7. 사용자 상호작용 및 업데이트

• 브라우저는 렌더링된 페이지에 대한 사용자 입력(클릭, 스크롤, 입력 등)을 처리하며, 이러한 상호작용에 따라 페이지를 업데이트합니다.
  
• JavaScript는 이 상호작용을 감지하고, DOM 또는 CSSOM을 조작하여 페이지를 동적으로 변경할 수 있습니다.
• 예를 들어, 사용자가 버튼을 클릭하면 JavaScript가 DOM을 수정하고, 그에 따라 브라우저는 렌더 트리를 다시 구성하고, 필요한 경우 페이지를 다시 페인팅합니다.