브라우저 렌더링 과정 (google.com을 입력하면?)

면접 질문 중 기본으로 여겨지며 가장 많이 물어본다고 하는 '크롬에 google.com을 입력하면 어떤 일이 발생하나요?' 에 대해서 정리해보려고 한다.

 

몇번이고 공부하고 외워봐도 며칠이면 기억에서 사라지는 경험을 겪다보니 정리하게 되었다.

 

네트워크, 브라우저 렌더링 과정을 모두 자세히 설명하자면 말도 안되게 길어지니까 최소치만 써보았다.

 

특히 브라우저 렌더링 과정을 자세히 다룬 글은 이 포스팅을 참고하면 된다. (네트워크는 알아서 책으로 공부..!)

 

 

 

브라우저에 URL을 입력하면 무슨 일이 발생할까?

1. 브라우저는 URL을 해석한다.

 

2. 해석한 URL을 토대로 브라우저 캐시에 해당 url이 있는지 확인한다 (여기부턴 있으면 바로 IP를 반환)

 

3. 없다면 로컬의 hosts파일을 참조해본다. 

 

4. 여기도 없다면 DNS를 호출한다. DNS는 Root Server -> TLD server -> Authoritative Server 순으로 탐색하게 된다.

 

5. 동적 라우팅을 통해 해당 IP가 존재하는 서버로 이동한다. (네트워크 이론에서 공부)

 

6. ARP 프로토골을 이용하여 논리주소인 IP주소(도로명)를 MAC주소(위도와 경도)로 변환한다. 

 

7. TCP 통신을 위해 소켓을 열게된다. (3way handshaking, 네트워크 4계층 등이 여기에 포함.)

 

8. 서버는 응답을 반환하게 된다. (http response message)

 

9. 브라우저는 DOM 트리를 구축하고 이를 기반으로 렌더링한다.

 

간단하게 말하려면 끝도 없이 간단하고, 자세히 말하려면 끝도 없이 자세하지만, 여기 적은 9단계가 '최소' 이정도는 말해야 하는 선이 될 것 같다. 

 

이 글에 있는 각 단계(특히 4~9 단계)는 각각 내용이 방대하니 필요할 때 마다 이 글을 기반으로 각 단계를 더 자세히 복습하며 천천히 체화해한다고 생각된다.

DNS
동적 라우팅

ARP프로토콜

TCP통신

OSI 7계층

브라우저 렌더링

 

이러한 키워드들을 통해 늘 복습하도록 하자.