[Internet] Browsers and how they work?

브라우저들을 소개하며 그 작동 원리를 설명하겠습니다.

 

 

Browser

보통 웹 브라우저 혹은 인터넷 브라우저, 웹 탐색기 등으로 부릅니다.

주요 웹 브라우저로는 구글 크롬, 모질라 파이어폭스, 인터넷 익스플로러 등등이 있습니다.

웹 브라우저는 사용자를 대신하여 인터넷을 통해 웹 서버에 데이터를 요청하고 응답된 데이터를 사용자에게 GUI로 보여주는 클라이언트 프로그램입니다.

 

 

How they work?

HTTP와 같이 웹 서버가 사용하는 프로토콜을 사용하여 인터넷을 통해 웹 서버에 웹 페이지 등의 데이터를 요청하고 응답받은 데이터들로 사용자에게 웹 페이지와 다양한 데이터들을 출력해 주는 것이 웹 브라우저의 주된 기능입니다.

HTTP는 이전 포스트에서 설명했으니 참고해주시면 감사하겠습니다.

 

그렇다면 사용자의 입장에서 브라우저가 어떻게 동작하는지 순서대로 알아봅시다.

 

Navigation

탐색(Navigation)은 웹 페이지를 로딩하는 첫 단계입니다.
사용자가 주소창에 URL을 입력하거나 링크를 클릭하고, 폼을 제출하는 등의 동작을 통해 웹서버에 요청을 보낼 때마다 동작합니다.

이후부터는 사용자가 주소창에 URL을 직접 입력한 것으로 예시를 들어 진행하겠습니다.

 

DNS Lookup

웹 페이지를 요청하기 위해 입력된 URL이 웹 서버의 IP 주소값이 아니라면 DNS 서버를 통해 웹 서버의 IP 주소값을 조회해야 합니다.

이 부분은 다음 로드맵이므로 다음 포스트에서 설명해 드리겠습니다.

 

TCP Handshake

IP 주소를 알게 되었으면 브라우저는 웹 서버에 TCP 핸드셰이킹을 통해 연결을 설정해야 합니다.

여기서 TCP 핸드셰이킹은 간단히 설명하자면 두 주체가 데이터를 전송하는 연결을 하기 위한 준비과정이라고 생각하면 됩니다.

( 이후 OSI 7 계층에 관한 포스트를 작성하면서 자세한 설명을 하겠습니다. )

이 연결이 이루어지면 TLS Negotiation을 통해 완전한 연결이 이루어지며 브라우저가 웹 서버에 요청을 할 수 있습니다.

 

Response

웹 서버로 위 방법을 통해 연결이 성립되면, 브라우저는 초기 HTTP request를 보냅니다.

웹 서버가 이 요청을 받으면, 관련 응답 해더와 함께 데이터를 응답하게 됩니다.

 

Parsing

브라우저가 데이터의 청크를 받으면, 수신된 정보를 구문 분석하기 시작합니다.

여기서 구문 분석은 브라우저가 네트워크를 통해 받은 데이터를 DOM이나 CSSOM으로 바꾸는 단계입니다.

이렇게 바뀐 데이터는 화면을 렌더링을 하는 데 사용합니다.

화면에 렌더링 하기 전에 HTML, CSS, Javascript를 구문 분석을 해야 합니다.

 

Render

파싱 된 데이터를 토대로 렌더링 하여 화면에 표시합니다.

렌더링 과정에는 스타일, 레이아웃, 페인트, 합성이 포함됩니다.

 

Interactivity

페이지를 화면에 모두 표시되어도 버튼 클릭, 스크롤링 등의 상호작용(Interactivity)이 불가능할 수 있습니다.

Javascript의 다운로드가 지연되는 등의 이벤트가 발생했다면 상호작용이 가능한 시간은 늦춰지게 됩니다.

 

Other

이렇게 동작하는 것뿐만 아니라 책갈피, 캐시 및 쿠키와 같은 데이터를 관리하는 역할도 수행합니다.

 

 

Browsers and how they works?!

결론적으로 브라우저는 사용자 대신 인터넷을 통해 웹 서버와 연결 후 HTTP등과 같은 방법으로 통신하여 웹 페이지의 데이터를 응답받아 화면에 GUI로 보여주며 여러 사용자를 위한 기능을 수행한다고 할 수 있습니다.

 

 

 

 

Reference

https://ko.wikipedia.org/wiki/%EC%9B%B9_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80

웹 브라우저 - 위키백과, 우리 모두의 백과사전

https://www.techtarget.com/whatis/definition/browser

What is browser?

https://web.dev/howbrowserswork/

How browsers work

https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work#%EC%9D%91%EB%8B%B5response

웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가 - 웹 성능 | MDN