레퍼런스
https://www.youtube.com/watch?v=FQHNg9gCWpg
https://youtu.be/z1Jj7Xg-TkU?si=ayDJy4iWGqkKnPrP
1. URL 입력
사용자가 브라우저의 주소창에 www.naver.com과 같은 URL을 입력하면, 브라우저는 이를 기반으로 서버와 통신하기 위해 준비를 시작합니다.
2. DNS 요청 및 IP 주소 확인
- 브라우저는 DNS 서버에 해당 도메인 이름(www.naver.com)에 대한 IP 주소를 요청합니다.
- DNS 서버는 요청에 응답하여 IP 주소(예: 223.130.195.200)를 반환합니다.
3. TCP 연결 (3-Way Handshake)
브라우저는 서버와 데이터 전송을 위해 안정적인 연결을 설정합니다.
TCP 3-Way Handshake는 다음 단계
SYN (Synchronization)
|
SYN-ACK (Synchronization + Acknowledgment)
|
ACK (Acknowledgment)
|
4. HTTP 요청 및 응답
브라우저는 서버에 필요한 데이터를 요청하는 HTTP Request를 보냅니다.
서버는 HTML, CSS, JavaScript, 이미지 등 필요한 리소스를 포함한 HTTP Response를 반환합니다.
이 과정에서 데이터는 8비트 형태의 바이트 스트림으로 전달됩니다.
브라우저는 이 바이트 스트림을 문자로 변환한 뒤, 이를 가지고 있는 토큰과 비교하여 HTML 코드인지 확인합니다.토큰은 브라우저가 이해할 수 있도록 미리 정의된 구문 분석 단위입니다.
브라우저는 HTML, CSS, JavaScript 등의 언어에서 사용하는 키워드, 태그, 속성 등을 토큰으로 저장하고 있으며, 이를 통해 받은 데이터를 해석하고 렌더링 과정을 시작합니다.
예를 들어, <html>, <body>, <div>와 같은 태그, 속성, 그리고 JavaScript의 키워드인 function, var 등은 모두 토큰으로 간주됩니다.
- 브라우저가 HTTP Request를 서버로 전송합니다.
- 서버는 HTTP Response로 리소스를 반환합니다.
- 받은 데이터는 8비트 바이트 스트림으로 전달됩니다.
- 브라우저는 바이트 스트림을 문자로 변환합니다.
- 변환된 문자를 토큰과 비교하여 HTML, CSS, JavaScript 등의 코드로 해석합니다.
- 해석된 코드로 DOM(Document Object Model)을 구성하고, 최종적으로 화면에 렌더링합니다.
5. 데이터 처리 및 화면 출력
서버에서 데이터를 받은 브라우저는 화면에 웹 페이지를 출력하기 위해 여러 단계를 거칩니다. 이 과정은 크게 Construction과 Operation으로 나뉩니다.
6. Construction 단계
6.1 HTML 파싱 및 DOM 트리 생성
- HTML 파일을 읽고, 이를 기반으로 DOM(Document Object Model) 트리를 생성합니다.
- DOM 트리는 HTML 문서의 계층 구조를 나타냅니다.
6.2 CSS 파싱 및 CSSOM 트리 생성
- HTML 파싱 도중 CSS를 만나면, CSS를 파싱하여 CSSOM(CSS Object Model) 트리를 생성합니다.
- CSSOM 트리는 스타일 정보를 포함하며, DOM 생성을 일시 중지합니다
6.3 JavaScript 처리
- HTML 파싱 도중 <script> 태그를 만나면 브라우저는 JavaScript 엔진에게 제어를 넘깁니다.
- JavaScript 엔진은 코드를 분석하여 AST(Abstract Syntax Tree)를 생성하고, DOM이나 CSSOM을 수정할 수 있습니다.
- JavaScript 실행 후 HTML 파싱이 재개됩니다.
6.4 Render 트리 생성
- 브라우저는 DOM 트리와 CSSOM 트리를 결합하여 Render 트리를 생성합니다.
- Render 트리는 화면에 표시할 요소와 스타일을 포함합니다.
7. Operation 단계
7.1 Layout / Reflow (배치)
- Render 트리의 각 노드를 화면의 적절한 위치에 배치합니다.
- 화면 공간을 계산하고 요소를 배치하는 작업이 진행됩니다.
7.2 Paint / RePaint(그리기)
- UI 백엔드가 Render 트리를 기반으로 텍스트, 이미지, 배경 등을 실제 화면에 그립니다.
7.3 Composition (합성)
- 요소를 여러 레이어로 나누어 구성하고, 이를 적절한 순서로 합성하여 화면에 표시합니다.
- Z-index 값 등을 활용해 레이어의 순서를 결정합니다
8. 브라우저의 점진적 렌더링
브라우저는 데이터를 모두 다운로드한 뒤 화면에 출력하지 않습니다.
서버에서 일부 데이터를 받을 때마다 바로 화면에 표시하여 사용자에게 더 빠른 경험을 제공합니다.
이로 인해 웹 페이지는 한 번에 로딩되지 않고, 점진적으로 화면에 출력됩니다.
렌더링 엔진과 JavaScript 엔진
렌더링 엔진 (Rendering Engine)
- 역할: HTML, CSS, JavaScript 등을 파싱하고, 사용자가 볼 수 있는 화면으로 변환.
- 주요 렌더링 엔진:
- 크롬: Blink
- 사파리: WebKit
- 파이어폭스: Gecko
JavaScript 엔진
- 역할: JavaScript 코드를 실행하고, DOM 및 CSSOM을 조작하여 동적이고 인터랙티브한 웹 페이지를 구현.
- 주요 JavaScript 엔진:
- 크롬: V8
- 사파리: JavaScriptCore
- 파이어폭스: SpiderMonkey
'컴퓨터 공학 기초 지식 > 웹' 카테고리의 다른 글
| [웹 기본] IP 란?(니아이피추적한다) (3) | 2024.10.25 |
|---|---|
| [웹 기본] 클라이언트와 서버 (0) | 2024.10.25 |
| [웹 기본] 인터넷은 어떻게 동작하는가? (0) | 2024.10.25 |