WebBrowser의 실행 과정

우리가 웹브라우저의 주소창에 https://www.google.com을 입력하여 엔터를 누르는 순간 사용자의 눈에 보이지 않는 짧은 시간에 

일어나는 일련의 과정을 정리해보았습니다.

주소창에 https://www.google.com 입력후 Enter

1. IP 주소 확인

URL(Uniform Resource Locator)을 번역하면 통일된 파일의 위치 지정자 입니다.

즉, URL은 HTML페이지, CSS문서, Image등이 통합된 고유한 자원을 찾기 위한 주소를 제공합니다.

이 때,

1. URL은 해당 자원의 주소를 찾기 위해 DNS(Domain Name System)에 해당 도메인에 대응하는 IP주소를 요청합니다.
   • DNS는 컴퓨터가 서로 통신하는 데 사용하는 숫자 IP 주소로 변환되는, 쉽게 읽을 수 있는 도메인 이름의 디렉터리입니다
2. DNS는 URL을 해당 이름과 연결된 웹 서버의 IP 주소로 변환합니다

 

2. TCP 3-way HandShake

 

TCP(Transmission Control Protocol)는 전송 제어 프로토콜로 받는 대상인 노드(호스트)가 서비스가능(연결가능) 상태인지 확인 및 연결을 수립하는 역할을 합니다.

1. 브라우저는 이 IP주소에 있는 서버를 찾아갑니다.
   • 이때 Random Sequence(랜덤한 숫자를 적은 번호표)를 들고갑니다.
2. 서버는 이 번호표에 1을 더해 다시 브라우저에게 돌려줍니다.
3. 브라우저는 받은 번호표에 다시 1을 더해 서버에게 전달하는데 이 과정을 3-Way HandShake라고 합니다.

즉, TCP 3-Way HandShake는 양 쪽 모두 데이터를 전송할 준비가 되었다는 것을 보장하고, 실제로 데이터 전달을 시작하기 전에 한쪽에서 다른쪽이 준비되었다는 것을 알 수 있게 합니다.

이제 브라우저는 서버에게 자료를 요청할 수 있는 상태가 됩니다.

 

3. HTTP Request&Response

1. 브라우저는 서버에게 해당 주소(www.google.com)에 있는 데이터를 요청합니다(HTTP Request)
2. 서버는 브라우저에게 요청을 받으면 브라우저에게 데이터를 보내줍니다(HTTP Response)

이렇게 웹브라우저는 서버에게 웹페이지에 필요한 자원을 요청하여 다운로드합니다. 이 자원에는 HTML 문서, CSS 스타일시트, JavaScript파일 등이 포함 될 수 있으며, 웹 브라우저는 이 파일들을 로컬 시스템에 임시적으로 저장(캐싱)합니다.

 

4. Data Parsing과 Dom Tree 생성

브라우저는 서버로부터 응답받아 다운로드한 파일을 사용자의 모니터에 출력(rendering)해줘야 합니다.

따라서 브라우저는 서버로부터 다운로드한 파일을 해석해야 합니다(Data Parsing)

1. 먼저 브라우저의 렌더링 엔진은 HTML을 parsing하여 Dom Tree를 생성합니다. HTML을 작성하듯 상위 요소 안에 하위 요소를 넣은 구조를 트리구조로 생성합니다

 

 

5. 화면에 데이터 출력