웹 브라우저의 동작 순서 정리

웹 브라우저를 열고, 웹 브라우저 내부에서는 어떤 일이 벌어지는지 정리하고자 한다.

먼저 웹 브라우저는 DNS에게 호스트의 IP주소를 알려달라고 요청하고,

DNS는 브라우저에게 호스트의 IP 주소를 찾아 응답한다.

그러면 브라우저는 IP 주소에 있는 서버를 찾아간다.

 

이때, 3-Way-Handshake 를 한다.

 

3-Way-Handshake 란

번호를 서버에 보내고, 서버에서 번호 + 1을 하여 전달함으로써 서버가 연결되었는지 확인하는 것이다.

 

이 핸드쉐이크 과정이 끝나면 브라우저는 서버에게 자료를 요청한다.

그러면 서버는 브라우저에게 데이터를 보낸다.

 

이때 보내는 요청을 HTTP 리퀘스트라고 한다.

 

이제 데이터를 출력하는 일만 남았다.

 

데이터를 출력하기에 앞서 브라우저는 서버로부터 받은 데이터를 해석해야 한다.
대부분의 브라우저는 웹 표준화 기구인 W3C의 명세에 따라 HTML과 CSS를 해석한다.
이렇게 해석하는 것을 파싱이라고 한다.

 

먼저 브라우저의 렌더링 엔진은 HTML을 파싱하여 Dom Tree를 생성한다.

이때 렌더링 엔진이 스타일 태그를 만난다면 HTML 파싱 작업을 중지하고 CSS 파싱 작업을 시작하여 Cssom Tree를 생성한다.

Css Parsing을 마치면 조금전에 HTML 파싱이 중단된 지점부터 다시 파싱을 시작한다.

이때 스크립트 태그를 만나면 멈추고 자바스크립트 앤진을 돌린다.
자바스크립트 엔진은 코드를 해석하여 추상 구문 트리인 AST( Abstract Syntax Tree )를 만들고 실행한다.

그 다음으로 아까 중단했던  html 파싱 작업을 완료한다.

그리고 브라우저는 Dom tree와 Cssom tree를 합쳐서 Render Tree를 생성한다.
렌더 트리를 생성하는 과정까지를  Construction이라고 한다.

그리고 렌더링 엔진은 레이아웃 작업을 시작한다.

렌더 트리의 노드들을 화면의 올바른 위치에 표시하는 것을 의미한다.

그 다음, UI 백엔드가 렌더 트리의 노드들을 돌면서 UI를 그린다.

그 다음이 노드들의 레이어를 순서대로 구성하는 Composition 단계이다.
Z-INDEX가 낮은 요소를 먼저 놓고 그 다음에 높은 요소를 놓는다.
레이아웃 작업부터 컴포지션까지의 과정을 Operation이라 한다.

이러한 파싱과 배치(레이아웃) 그리고 UI를 그리는 과정은 서버로부터 모든 데이터를 받고 나서 시작하지 않는다.
브라우저는 사용자에게 더 빠르게 화면을 출력해주기 위해 서버로부터 데이터의 일부를 받고 나서 화면에 표시하고, 또 데이터를 받게 되면 화면에 표시하는 것을 반복한다.
이 때문에 웹 페이지의 화면이 한번에 뜨지 않고 부분적으로 나타나는 현상이 나온다.

 

오늘은 웹 브라우저의 동작 순서에 대해 알아보았다.