프론트엔드 단골 면접 질문
크롬을 켜서, 브라우저 주소창에 google.com을 치자, 구글 페이지가 나타났다. https://velog.io/@old_dorim 라고 치자 내 블로그가 나타났다. 이 사이에 무슨 일이 일어났을까?
들어가기 전에 알아야할 것
DNS 서버
DNS 서버는 도메인 주소를 서버의 실제 IP 주소로 변환해주는 서버이다.
브라우저
브라우저(전체적인 처리, 탭 같은 부분), 네트워크(요청을 보내고 받음), 랜더링 프로세스(개별 창 안 내용물 처리, html, css, javascript)등으로 이루어져 있다.
프로세스 안에 여러 스레드가 있고, 그러나 여유 메모리에 따라 프로세스였다가 스레드였다가 하기도 한다.
과정
url 입력이 어디로 들어왔는가? 브라우저 주소창이다. 브라우저 프로그램의 브라우저 프로세스의 UI 스레드가 담당하는 부분에 입력이 들어온 것이다.
1. UI 스레드가 입력을 판별한다
- 검색어인가? 주소인가?
주소창에 주소를 치면 해당 주소의 데이터를 받아오겠지만, 글을 입력하면 바로 검색이 되기도 하니까. 이를 확인해서 검색어로 판별되면 검색 요청을 보내고, 아니면 해당 주소에 요청을 보낸다. 주소인지 판별이 안되면 DNS 서버를 한 번 보고 오기도 한다.
2. UI 스레드가 네트워크 쓰레드를 호출하여 요청을 보낸다
-
예전에 한 번 다녀온 주소인가?
UI 스레드가 네트워크 호출한다. 캐싱된, 최근에 다녀와서 기록이 남아 있는 DNS 기록이 있는지 찾아본다.
브라우저 캐시->운영체제 캐시->라우터 캐시->ISP 캐시를 둘러본다.
ISP의 캐시는 사실 ISP의 DNS 서버(ISP의 DNS 서버는 캐싱으로만 이루어지는 Recursive DNS Server이기 때문에)로, KT, SKT 같은 업체의 서버이다. ISP의 DNS 서버는 도메인의 IP를 찾아줄 책임이 있다. 본인에게 없으면, 다른 곳을 찾아봐준다. -
실제 ip 주소가 뭔가?
ISP의 DNS 서버가 root DNS에 요청을 보내고, TLS DNS 보내고... 정해진 규칙에 맞춰 찾을 때까지 이곳저곳 물어본다. 자세한 건 나는 스킵. 아래 참고할 글. 그렇게 실제 ip를 찾아온다.
https://gentlysallim.com/dns%EB%9E%80-%EB%AD%90%EA%B3%A0-%EB%84%A4%EC%9E%84%EC%84%9C%EB%B2%84%EB%9E%80-%EB%AD%94%EC%A7%80-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC/ -
그 주소 서버 연결해주실래요?
TCP connection을 한다. TCP는 패킷이 유실됐는지 확인하고 유실 됐으면 다시 보내는 통신 방식이다(유실을 확인하지 않으면 UDP, 웬만하면 TCP 쓴다). three-way handshake 라는 프로세스를 통해 서로 서버가 켜져있는지 확인한 후 요청을 날린 쪽과 서버 간의 connection이 이뤄지게 된다. 그냥 서로 확인한 상태를 connection이 되었다고 하는 것 같다. -
서버에 요청한다
http 프로토콜에 맞춰 데이터와 관련 정보 헤더(쿠키 같은 거)들을 보낸다. 서버 리디렉션 헤더를 받아서 요청을 다시 보내기도 한다.
3. 응답을 처리하여 창에 띄운다
-
컨텐츠(응답 데이터) 타입을 확인한다
네트워크 쓰레드가 Content-Type 헤더를 확인하고, 페이로드(응답) 스트림의 처음 몇 바이트를 확인하는 등의 작업으로 어떤 컨텐츠가 응답으로 왔는지 확인한다. 사실 아주 다양한 절차가 필요한 복잡한 작업이다.
zip 파일이거나, 뭐 여러 다른 파일이라면 다운로드를 하도록 다운로드 매니저에 넘긴다. html 파일이라면, 랜더러 프로세스로 들어간다. 우리는 google.com을 쳤으니, html과 그 친구들이 왔을 것이다. 악성 데이터인지, 서로 다른 사이트의 민감한 데이터인지 확인하여 문제가 있다면 렌더러 프로세스로 넘기지 않도록 확인한다. -
랜더러 프로세스에게 데이터를 넘긴다
네트워크 쓰레드가 UI 쓰레드에게 데이터가 준비되었음을 알리면, 브라우저가 랜더해줄 랜더러 프로세스를 찾는다. 빨리 수행하기 위해, 사실 이 단계는 요청이 들어간 순간 시작되고, 응답이 제대로 오지 않으면 그냥 버린다.
내비게이션을 실행해달라는 요청을 브라우저 프로세스에서 렌더러 프로세스로 IPC 메시지를 전송한다. 렌더러 프로세스에 브라우저 프로세스가 HTML 데이터를 전달한다. -
화면을 랜더한다
HTML 파일과 CSS 파일(있다면)을 파싱해서 각각 Tree를 만든다.
중간에 script를 만나면 제어권이 JS 엔진으로 넘어가서 AST 트리를 구성한다. AST는 바이트코드로 변환되어 인터프리터가 실행한다.
DOM Tree와 CSSOM Tree를 매칭시켜서 Render Tree를 구성. JS가 있다면 트리를 바꾸기도 할 것이다.
Rendering Tree에서 각 노드의 위치와 크기를 계산한다.
계산된 값을 이용해 각 노드를 화면상의 실제 픽셀로 변환하고, 레이어를 만든다.
레이어를 합성하여 실제 화면에 나타낸다.
참고자료
https://d2.naver.com/helloworld/9274593
https://tecoble.techcourse.co.kr/post/2021-10-24-browser-rendering/
