"브라우저 주소창에 www.google.com을 입력하면 어떤 일이 일어나나요?"
"브라우저는 어떻게 동작 하나요?"
"브라우저 렌더링 과정을 설명해주세요."
"DNS에 대해 설명해주세요."
...
브라우저 동작 과정에 관한 질문은 프론트엔드 기술면접에서 나오는 단골 질문이다.
오늘은 이에 관하여 종합적으로 정리해보자.
브라우저 동작 과정
브라우저 동작 과정은 크게 4가지로 나뉜다.
탐색 → 요청&응답 → 구문 분석(parsing) → 렌더
탐색(Navigation)
탐색(Navigation) 은 웹페이지를 로딩하는 첫 단계입니다. 사용자가 주소창에 URL을 입력하거나, 링크를 클릭하고, 폼(form)을 제출하는 등의 동작을 통해 요청을 보낼 때마다 발생합니다.
DNS 조회(DNS Lookup)
- 특정 웹사이트에 접속하기 위해서는 'www.google.com' 과 같은 도메인(Domain)이 아닌 '127.0.0.1'과 같은 IP 주소가 필요하다.
- 하지만 IP 주소는 외우기가 힘들고, 가독성이 떨어지기 때문에 도메인 명으로 웹페이지에 접속할 수 있도록 DNS 서버를 이용한다.
- DNS는 Doman Name System의 약자로 URL의 이름과 IP주소를 저장하고 있는 데이터베이스이다. (like 전화번호부)
- 출처: [웹 브라우저] 브라우저에 www.google.com을 치면 일어나는 일
1) 브라우저는 캐싱된 DNS 기록을 체크한다.
만약 캐싱된 DNS 기록 중 해당 도메인 이름에 맞는 IP 주소가 존재하면, 캐싱된 IP 주소를 바로 반환한다.
2) 요청한 URL이 캐시에 없으면, ISP는 DNS Query를 통해 검색하여 IP 주소를 찾는다.
- ISP는 인터넷 서비스 공급자의 약자이다. ex) SK, LG, KT 등.
- ISP는 IP 주소를 찾을 때까지, DNS 서버에서 다른 DNS 서버를 오가면서 반복 검색한다.
TCP 핸드셰이크 (TCP Handshake)
- 브라우저가 IP 주소를 얻게되면 서버와 http connection을 통해 서버와 연결을 한다.
- HTTP 연결의 경우 대표적인 인터넷 프로토콜인 TCP를 일반적으로 사용한다.
- TCP/IP three-way handshake라는 프로세스를 통해서 클라이언트와 서버간 connection이 이뤄지게 된다.
- 출처: [웹 브라우저] 브라우저에 www.google.com을 치면 일어나는 일
ℹ️ 3 way handshake의 과정
- A 클라이언트는 B 서버에 접속을 요청하는 SYN 패킷을 전송합니다.
- B 서버는 SYN 요청을 받고 A 클라이언트에게 요청을 수락한다는
SYN_ACK flag가 설정된 패킷을 전송합니다.- A 클라이언트는 B 서버에게 ACK를 전송 후, 연결이 이루어지고 데이터가 오고 가게 됩니다.
- 출처: 웹페이지를 표시한다는 것: 브라우저는 어떻게 동작하는가
TLS 협상 (TLS Negotiation)
HTTPS를 이용한 보안성있는 연결을 위해서는 또 다른 "핸드셰이크"가 필요합니다. (TLS 협상이라고 할 수 있는) 이 핸드셰이크는 통신 암호화에 쓰일 암호를 결정하고, 서버를 확인하고, 실제 데이터 전송 전에 안전한 연결이 이루어지도록 합니다. 이를 위해서 자원에 대한 실제 요청 전에 클라이언트에서 서버로 3번 더 왕복해야합니다.
요청 & 응답
Browser가 웹서버에 HTTP 요청을 한다.
웹 서버로 한 번 연결이 성립되고 나면, 브라우저는 유저 대신에 초기 HTTP GET request를 보낸다.
(예: 클라이언트는 GET 요청을 통해 서버에서 'www.google.com' 웹페이지를 요구한다.)
웹 서버: 정적 파일 처리, WAS: 동적 파일 처리
웹 서버 혼자서 모든 로직 처리 및 데이터 관리를 하게되면 서버에 과부하가 일어날 가능성이 높다. 그래서 WAS가 서버의 일을 돕는 조력자 역할을 한다.
ℹ️ WAS(웹 애플리케이션 서버)란?
웹 애플리케이션 서버는 웹 애플리케이션과 서버 환경을 만들어 동작시키는 기능을 제공하는 소프트웨어 프레임워크이다. 인터넷 상에서 HTTP를 통해 사용자 컴퓨터나 장치에 애플리케이션을 수행해 주는 미들웨어로 볼 수 있다.
특정 데이터 요청을 브라우저로부터 받게되면, 웹 서버는 페이지의 로직이나 데이터베이스의 연동을 위해 WAS에게 이들의 처리를 요청합니다.
WAS는 해당 요청을 통해 동적인 페이지 처리를 담당하고, DB에서 필요한 데이터 정보를 받아 그에 맞는 파일을 생성합니다.
- 웹 서버 : 정적인 파일(HTML, CSS, 이미지 파일)을 처리
- WAS : 동적인 파일(JS, TS)을 처리
- 출처: 블로그 - 주소창에 www.google.com을 입력했을 때 일어나는 과정
WAS에서의 작업 처리 결과들을 웹 서버로 전송하고, 웹 서버는 브라우저에게 HTTP Response를 전달한다.
서버가 요청을 받으면, 관련 응답 해더와 함께 HTML의 내용을 응답하게 된다.
서버의 response에는 요청한 웹페이지, status code, 쿠키, 개인정보 등이 포함되어있다.
ℹ️ status code
- 1xx : 정보가 담긴 메세지
- 2xx : response 성공
- 3xx : 클라이언트를 다른 URL로 리다이렉트
- 4xx : 클라이언트 측에서 에러 발생
- 5xx : 서버 측에서 에러 발생
- 출처: 블로그 - 주소창에 www.google.com을 입력했을 때 일어나는 과정
구문 분석(Parsing)
DOM 트리 구축(Building the DOM tree)
중요 렌더링 경로의 첫 단계: HTML을 처리하여 DOM 트리를 만든다.
이전 단계에서 통신을 통해 받아온 HTML 파일들은 바이트 형태로 전달되게 됩니다.
바이트 -> 문자 -> 토큰 -> 노드 -> 객체 모델로 전환하는 작업이 수행됩니다.
CSSOM 구축(Building the CSSOM)
중요한 렌더링 경로의 두 번째 단계: CSS를 처리하고 CSSOM 트리를 만든다.
HTML에서 사용했던 객체 모델로 전환하는 작업이 CSS 파일에 똑같이 적용됩니다.
다른 작업들
JavaScript 컴파일(JavaScript Compilation)
접근성 트리 구축(Building the Accessibility Tree)
브라우저는 접근성 트리를 만듭니다. 접근성 객체 모델(AOM)은 DOM의 의미 버전이다. 브라우저는 DOM이 업데이트 될 때 접근성 트리도 업데이트 한다.
ℹ️ AOM이 만들어지기 전까지, 화면 리더기는 컨텐츠에 접근할 수 없다.
렌더(Render)
렌더 트리 생성
중요한 렌더링 경로 세 번째 단계: DOM과 CSSOM을 합쳐 렌더 트리를 만든다.
Render Tree는 렌더링에 필요한 노드만 선택하여 페이지를 렌더링하는데 사용합니다.
레이아웃(Layout)
중요한 렌더링 경로 네 번째 단계: 렌더 트리를 기반으로 각 노드의 도형 값을 계산하기 위해 레이아웃을 실행한다.
레이아웃은 렌더 트리에 있는 모든 노드의 너비, 높이, 위치를 결정하는 프로세스이다. 추가로 페이지에서 각 객체의 크기와 위치를 계산한다.
페인트(Paint)
중요한 렌더링 경로 마지막 단계: 각 노드를 화면에 페인팅한다.
텍스트, 색깔, 경계, 그림자 및 버튼이나 이미지 같은 대체 요소를 포함하여 모든 요소의 시각적인 부분을 픽셀로 변환하여 화면에 그리는 작업이다.
마무리
설명이 빠진 것들이 많긴 하다. 우선은 중요한 것 위주로 써봤다.
빠진 설명을 더 보려면 아래 참고 자료를 살펴보는 것을 추천한다.
면접에서 자주 나오는 질문이긴 한데, 솔직히 말하면 간단하게 설명해야할지, 상세히 설명해야할지 모르겠다. 상세히 설명하면 설명이 너무 길어져서 듣는 사람이 지루하지 않을까...?
면접에서 이 질문이 나오면 큰 것 먼저 설명해야겠다.
참고 자료
