Web Browser 동작원리 Re

1) 브라우저는 DNS를 통해서 특정 IP를 특정한다.

2) 브라우저는 서버에 요청을 하는데 여기서 3 way-handshake가 실행된다.

3) 서버에 Http Request를 하고 Http Response를 통해 데이터를 받는다.

4) 웹 표준화 기구인 W3C의 명세에 따라 HTML, CSS를 해석한다 → parsing

5) 렌더링 엔진은 HTML을 parsing하여 DOM Tree를 생성

6) HTML을 parsing하다가 css를 만나게 되면 HTML parsing을 멈추고 CSS parsing을 하여 CSSOM Tree 생성

7) CSS parsing이 멈추면 다시 HTML을 다시 parsing

8) HTML parsing을 하다가 JavaScript를 만나면 JavaScript엔진에게 제어 권한을 넘긴다.

9) JavaScript는 Abstract Syntax Tree를 만들고 실행한다.

10) HTML parsing을 완료한다.

11) DOM Tree + CSSOM Tree = Render Tree를 생성한다.

→ 1~11까지가 Construction

 

12) Rendering engine은 Layout작업을 시작한다. 렌더 트리의 노드들을 화면에 올바른 위치에 표시하는 것을 말한다. 

13) 그 다음 UI 백엔드가 Lender Tree의 노드들을 돌면서 UI를 그린다.

14) 그 다음 노드들의 레이어를 순서대로 구성하는 Composition을 닫는다.

15) z-index가 낮은 요소를 먼저 놓고 그 다음에 높은 요소를 놓는다.

→ 12 ~ 15까지가 Operation

 

이러한 과정을 데이터를 모두 받고 실행하는 것이 아니라 데이터를 받는 순서대로 위의 상황을 반복한다.