브라우저의 작동방식에 대해서 설명해주세요.
브라우저의 작동 방식은 다음과 같은 순서로 진행됩니다.
1.
사용자가 URL을 입력하면 브라우저는 웹 서버에 HTTP 요청을 보내고 데이터를 수신합니다.
2.
받은 HTML과 CSS는 파싱되어 DOM과 CSSOM 트리를 생성하며, 이들은 렌더 트리로 병합됩니다.
3.
렌더 트리를 기반으로 레이아웃 단계에서 각 요소의 크기와 위치를 계산합니다.
4.
계산된 정보로 화면에 페이지를 그리는 페인팅 단계가 이루어집니다.
5.
필요한 JavaScript가 실행되고 모든 요소가 로드되면 페이지가 완성되어 사용자와 상호 작용합니다.
세부 과정
브라우저의 작동 방식은 다음과 같은 단계로 이루어집니다:
1.
URL 입력 및 요청: 사용자가 URL을 입력하면 브라우저는 해당 주소의 웹 서버에 HTTP 요청을 보냅니다.
2.
서버 응답 및 데이터 수신: 서버는 요청을 처리하고 HTML, CSS, JavaScript 파일 등을 브라우저에게 응답으로 보냅니다.
3.
HTML 파싱 및 DOM 생성: 브라우저는 HTML을 파싱하여 Document Object Model (DOM) 트리를 만듭니다. 이 트리는 웹 페이지의 구조를 나타냅니다.
4.
CSS 파싱 및 CSSOM 생성: CSS 파일도 파싱되어 CSS Object Model (CSSOM) 트리가 생성됩니다. 이것은 페이지의 스타일을 정의합니다.
5.
렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리를 생성합니다. 이 트리는 페이지의 시각적 표현을 나타내며, 각 요소의 크기와 위치를 포함합니다.
6.
레이아웃 단계: 렌더 트리를 기반으로 브라우저는 각 요소의 크기와 위치를 계산합니다.
7.
페인팅: 계산된 스타일과 레이아웃 정보를 사용하여 화면에 페이지를 그립니다. 여기에는 텍스트, 이미지, 다른 시각적 요소들이 포함됩니다.
8.
JavaScript 실행: 필요한 경우 JavaScript가 실행되어 동적인 기능을 추가하거나 페이지를 변경합니다.
9.
로드 완료: 모든 요소와 스크립트가 로드되고 실행되면 페이지 로딩이 완료됩니다. 사용자는 이제 페이지와 상호 작용할 수 있습니다.
이러한 과정은 빠르게 일어나며 사용자에게는 매끄럽게 보이게 됩니다. 동적인 웹 페이지의 경우 추가적인 비동기 요청과 작업이 있을 수 있어, 사용자와의 상호 작용에 따라 계속 업데이트될 수 있습니다.
예시 과정
www.naver.com을 입력하면 발생하는 일에 대해서 정리해야 한다.
→ 주소창에 입력하면,
→ 주소는 DNS에 의해서 IP를 찾아내게 된다.
→ DNS는 먼저 컴퓨터의 캐쉬를 확인하게 되고, 브라우저, OS, 라우터, ISP 순서대로 도메인을 찾아내게 된다.
→ TCP 연결을 시도한다.
→ TCP연결에서는 3way handshake라는 과정이 들어간다.
이렇게 서로 연결된 TCP연결 위에 HTTP라는 프로토콜 형식으로 Request를 보내게 된다.
→ 인터넷을 통해서 서버에 Get, Post 등 Request가 전달 된다. (헤더나 바디에 정보가 포함 될 수 있음)
→ 서버는 요청을 받아들이고(헤더, 바디에 포함된 정보(데이터))를 로직에 따라 응답을 반환
→ 서버는 요청이 정상이면 2xx대, 클라이언트의 잘못된 요청은 4xx대, 서버의 문제인 경우 5xx대 HTTP Status code를 반환하면서 값을 클라이언트로 전달해준다.
→ 클라이언트는 HTML는 DOM트리로 파싱, CSS는 CSSOM트리로 파싱되고 렌더 트리를 만들게 되고JavaScript는 브라우저의 V8엔진이란 곳에서 해석이되고, JS코드가 렌더트리에 붙게 되면서 동작이 완료 된다.
→ 이후 연결이 성립되었으니 4way handshake로 연결을 종료시키는 과정이 진행된다.
3way, 4way handshake란?
3way handshake
TCP/IP프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 상대방 컴퓨터와 사전에 세션을 수립하는 과정
클라이언트와 서버에서 SYN(synchronize sequence numbers)와 ACK(acknowledgment) 패킷을 주고 받으며 서로 TCP 연결을 맺는 과정.
[STEP 1]
A클라이언트는 B서버에 접속을 요청하는 SYN 패킷을 보낸다. 이때 A클라이언트는 SYN 을 보내고 SYN/ACK 응답을 기다리는SYN_SENT 상태가 되는 것이다.
[STEP 2]
B서버는 SYN요청을 받고 A클라이언트에게 요청을 수락한다는 ACK 와 SYN flag 가 설정된 패킷을 발송하고 A가 다시 ACK으로 응답하기를 기다린다. 이때 B서버는 SYN_RECEIVED 상태가 된다.
[STEP 3]
A클라이언트는 B서버에게 ACK을 보내고 이후로부터는 연결이 이루어지고 데이터가 오가게 되는것이다. 이때의 B서버 상태가 ESTABLISHED 이다.
위와 같은 방식으로 통신하는것이 신뢰성 있는 연결을 맺어 준다는 TCP의 3 Way handshake 방식
TCP의 4-way Handshaking 과정은 3way와 반대로 세션을 종료하는 과정입니다.
[STEP 1]
클라이언트가 연결을 종료하겠다는 FIN플래그를 전송한다.
[STEP 2]
서버는 일단 확인메시지를 보내고 자신의 통신이 끝날때까지 기다리는데 이 상태가 TIME_WAIT상태다.
[STEP 3]
서버가 통신이 끝났으면 연결이 종료되었다고 클라이언트에게 FIN플래그를 전송한다.
[STEP 4]
클라이언트는 확인했다는 메시지를 보낸다.