Background - Web(1st stage) : Web Browser

웹 브라우저는 뛰어난 이용자 경험(User eXperience, UX)을 제공하는 소프트웨어 중 하나. 이용자는 브라우저를 이용하여 쉽게 정보를 검색하고, 동영상을 보고 파일을 내려받지만 내부에서 어떠한 연산이 일어나는지 전혀 알지 못함.

아래는 이용자가 주소창에 dreamhack.io를 입력했을 때 웹 브라우저가 하게 되는 기본적인 동작을 나열한 것. 

1. 웹 브라우저의 주소창에 입력된 주소를 해석 (URL 분석)
2. dreamhack.io에 해당하는 주소 탐색 (DNS 요청) 
3. HTTP를 통해 dreamhack.io에 요청
4. dreamhack.io의 HTTP 응답 수신
5. 리소스 다운로드 및 웹 렌더링 (HTML, CSS, Javascript)

<URL>

URL은 Uniform Resource Locator의 약자로, 웹에 있는 리소스의 위치를 표현하는 문자열. 브라우저로 특정 웹 리소스에 접근할 때는, URL을 사용하여 이를 서버에 요청함. 

URL은  Scheme, Authority (Userinfo, Host, Port), Path, Query, Fragment 등으로 구성됨.

URL의 구성, 출처 : 드림핵

URL의 구성요소에 대한 설명, 출처 : 드림핵

<Domain Name>

URL 구성 요소 중 Host는 웹 브라우저가 접속할 웹 서버의 주소를 나타냄. Host는 Domain Name, IP Address의 값을 가질 수 있음. 

*IP Address

 네트워크상에서 통신이 이루어질 때 장치를 식별하기 위해 사용되는 주소

*Domain Name

Host 값으로 이용할 때, 브라우저는 Domain Name Server(DNS)에 Domain Name을 질의하고, DNS가 응답한 IP Address를 사용함. 예를 들어, 웹 브라우저에서 http://example.com에 접속할 경우, DNS에 질의해 얻은 example.com의 IP와 통신함.

 

<웹 렌더링>

웹 렌더링(Web Rendering)은 서버로부터 받은 리소스를 이용자에게 시각화하는 행위임. 서버의 응답을 받은 웹 브라우저는 리소스의 타입을 확인하고, 적절한 방식으로 이용자에게 전달함. 예를 들어, 서버로부터 HTML과 CSS를 받으면 브라우저는 HTML을 파싱하고 CSS를 적용하여 이용자에게 보여줍니다.

웹 렌더링은 웹 렌더링 엔진에 의해서 이뤄지는데, 브라우저별로 서로 다른 엔진을 사용함. 사파리는 웹킷(Webkit), 크롬은 블링크(Blink), 파이어폭스는 개코(Gecko) 엔진을 사용함. 각각의 엔진에 따라 렌더링 과정과 순서, 속도의 차이는 있지만, HTML을 파싱하고 시각화하여 이용자에게 보여주는 것은 같음.

출처 : 드림핵

#출처 : 드림핵