브라우저 작동원리

#1. 웹사이트 접속

- 주소창에 naver.com을 치면....

 

1. DNS (IP주소 반환)

웹브라우저는 DNS에게 해당 호스트의 IP주소 요청. 숫자 형태의 IP주소를 받는다.

 

2. 3 Way Handshake

- 브라우저와 서버 사이에서 데이터를 주고 받기 위해 3 Way Handshake 한다.

- Handshake 과정이 끝난 후 브라우저는 서버에게 자료 요청

 

 

#2. HTTP Request + HTTP Response

1. HTTP Request

- 브라우저가 서버에게 데이터 달라고 요청

 

2. HTTP Response

- 브라우저의 요청에 서버가 응답해서, 데이터를 준다.

 

 

#3. Data Parsing

- 브라우저는 서버로 부터 받은 데이터를 해석

 

1. Construction

1) HTML Parsing 하여 DOM Tree를 만든다.

... 중간에 <style> tag가 있다면, HTML Parsing을 잠시 멈추고, CSS Parsing을 먼저 수행.

 

2) CSS Parsing 해서 CSSOM Tree 만든다.

 

.... 다시 HTML Parsing...

.... 중간에 <script> 가 있다면. javasciprt엔진에게 제어 권한을 넘김

 

3) JS Parsing  해서  AST(Abstract Syntax Tree : 추상구문 tree)를 만들고 실행

 

... 다시 HTML Parsing...

 

4) HTML Parsing완료

 

5) DOM Tree + CSSOM Tree = Renter Tree생성

 

2. Operation

1) Layout : Render Tree 에 있는 Node 배치

2) Painting : UI Backend 는 Render Tree 에 있는 Node UI를 그림

3) Composition : Node들의 UI를 순서대로 구성

 

3. Display

1) 사용자에게 화면 출력

 

 

 

 

 

 

* 참고문헌

https://www.youtube.com/watch?v=FQHNg9gCWpg