세세한 디테일까지는 아니더라도 전체적으로나마 브라우저가 어떻게 동작하는지 알면 좋을 것 같아서 정리해봤다

전체적인 순서는 다음과 같다.

  1. 사이트의 IP 주소 찾기
  2. 서버에서 데이터 요청
  3. 데이터 파싱 및 렌더 트리 생성
  4. 렌더링 작업 (Operation) - Layout, Paint, Composition

사이트의 IP 주소 찾기

우리가 구글을 들어가기 위해 브라우저에 https://www.google.com 과 같이 주소를 친다고 하자. 우리는 이것을 URL 이라고 하는데, 여기서 URL의 부분들을 각각 https:// 는 Protocol, www 를 Subdomain, .google 을 Domain Name, 그리고 .com 을 Top Level Domain, 혹은 TLD 라고 한다.

이제 이 URL을 기반으로 브라우저는 우리가 접속하고자 하는 웹사이트의 내용물이 있는 서버를 찾아야 한다. 당연히 컴퓨터가 모든 웹사이트들의 서버 주소를 알 수는 없기 때문에, Recursive DSN Server 라는 서버에 요청을 보낸다. 보통 통신사들 (ISP) 마다 이러한 서버를 두고 있고, 사용자들은 사용중인 통신사의 서버로 요청을 하게 된다.

여기서 부터는 다양한 서버들을 확인 하는데, 우선 Root Nameserver에 가서 해당 URL의 TLD를 확인한다. TLD 마다 각 TLD의 모든 사이트를 아는 TLD Nameserver 가 있는데 (예를 들어 .com nameserver), 이 서버의 위치를 Root Nameserver 가 알기 때문이다. Root Nameserver는 전세계에 13가지가 있다.

TLD Nameserver 는 이제 URL을 보고, 해당 Domain 의 Authoritative DNS 라는 서버를 찾게 된다. 이 Authoritative DNS는 해당 도메인의 모든의 IP를 가지고 있기 때문에, 마침내 주소를 반환해준다. 컴퓨터는 이 주소를 받으면 드디어 해당 서버에 요청을 보내고 사이트의 내용물(?)을 받게 된다.

https://www.businessinsider.com/guides/tech/what-is-a-dns-server

https://www.businessinsider.com/guides/tech/what-is-a-dns-server

다소 복잡한것 같지만 서버 주소를 전화번호라고 생각하면 조금 쉽다. 예를 들어 내가 집에 있는데, 회사 A에 일하고 있는 친구에게 전화를 하고 싶다고 하자. 우선 114에 전화를 해서 회사의 번호를 알아낸 후, 회사에 전화를 걸어 친구가 어느 부서인지 알아 내고, 그 부서의 번호를 확인한 후, 해당 부서에 연결을 해야 친구에게 닿을 수 있다고 생각을 하면 위의 과정이 납득이 된다. 내가 전 세계 사람들의 전화번호를 외울 수는 없으니, 단계별로 나눠서 전화번호들을 관리해주는 사람들을 통해서 친구의 번호를 찾게 되는 것이다.

서버에서 데이터 요청

서버의 주소가 확인이 되면 서버에 데이터를 요청하는데, 이때 요청 Protocol에 따라 요청 과정이 다르다. 프로토몰에 따라서 주고 받는 내용의 형식이나 과정에 차이점이 있는데, 대표적인 프로토콜로 http와 https가 있다.

각 프로토콜의 자세한 내용은 나중에 다시 정리를 하겠지만, http의 경우 TCP/IP 를 사용하고, 처음 연결을 할때는 3way handshake, 종료를 할때는 4 way handshake 을 하고, 연결된 도중에는 HTTP Request 를 받아서 HTTP Response를 컴퓨터에 돌려준다.

https은 http에서 암호화를 추가해 보안을 강화한 프로토콜이다. 기존에는 SSL (Secure Sockets Layer) 이라는 기술을 사용했으나, 지금은 더욱 보안된 TLS (Transport Layer Security) 라는 기술을 사용한다.

서버에서 받은 패키지는 Byte 형태로 들어오며, 이를 패키지에 명시된 인코딩 방식을 확인하고 문자열로 디코딩 한 후에 사용도

데이터 파싱 및 렌더 트리 생성

웹사이트를 구성하는 세가지가 종류의 데이터로 html, css, js 가 있다. 웹 사이트는 이 데이터들로 각각 다른 트리를 구성하는데, html 파일의 데이터로 DOM Tree를, css 파일의 데이터로 CSSOM Tree를, 그리고 js 파일의 데이터로 Abstract Syntax Tree 를 만든다.