웹페이지가 사용자에게 보여지는 과정에 대해서 설명하세요.

웹 브라우저의 동작 원리

W3C Navigation Timing Level 2 Specification에 첨부되어있는 웹 브라우저 네비게이션 동작과정을 도식화 한 이미지

웹페이지 로드 과정

브라우저에서 특정 페이지로 이동할 때 어떤 과정을 거치는지 알아봅시다.
현재 페이지에서 특정한 다음 페이지로 이동한다고 가정하면, 웹 페이지를 로드하는 과정은 W3C Spec을 따릅니다.

Prompt for unload

현재 페이지에서 다른 페이지로 이동할 때 발생하는 이벤트로 뒤로가기 버튼이나 링크를 눌러 다른 도메인의 페이지로 이동할 경우 발생합니다.

웹 브라우저 내 현재 문서에서 다른 문서로 벗어나는(이동하는) 단계로 unload(window: beforeunload 이벤트)를 적용할 수 있습니다.
beforeunload 이벤트를 사용하면 사용자가 페이지를 떠날 때 정말로 떠날 것인지 묻는 확인 대화 상자를 표시할 수 있습니다. 사용자가 확인을 누를 경우 브라우저는 새로운 페이지로 탐색하고, 취소할 경우 탐색을 취소하고 현재 페이지에 머무릅니다.

Redirect

브라우저의 URL 요청에 대해, 서버에서 다른 URL로 요청할 것을 지시하는 것을 말합니다.
예를 들어, 브라우저에서 A 라는 URL을 웹 서버에 요청했을때 서버는 B 로 재요청할 것을 지시할 수 있습니다. Redirect 는 HTTP 표준으로 정의되어 있습니다.
최초 요청을 받은 웹서버는 HTTP 응답 상태코드로 302를 보내게 되는데, 헤더필드 내 Location에 Redirect 되어야할 URL 주소를 반환합니다. 이는 optional이라서, 발생하지 않을 수도 있습니다.

AppCache

서버에서 데이터를 불러오기 전 저장된 데이터가 있는지 확인하는 단계입니다.
사용자가 앱을 실행하거나 웹사이트를 처음으로 방문한 후, 다음번의 재방문시 빠르게 정보를 수집하거나 실행할 수 있도록 일부 임시 저장된 데이터가 캐시데이터입니다. 만일 캐시되어있다면, 네트워크 통신없이 바로 꺼내어 사용하면 됩니다. 이를 통해 속도를 증가시킬 수 있습니다.

DNS(Domain Name Server)

DNS는 인터넷 전화번호부라고 할 수 있는데, DNS는 사람이 읽을 수 있는 도메인이름을 머신이 읽을 수 있는 IP 주소로 변환하여 사람이 복잡한 주소를 기억할 필요가 없도록 해줍니다. 요청을 보내기 전에 브라우저에 해당 도메인이 캐시되어 있는지 확인합니다.
만일 없다면 로컬에 저장되어 있는 Hosts 파일에서 참조할 수 있는 도메인을 확인합니다. 이 두 가지를 모두 확인해도 없다면 DNS를 조회하며 IP를 획득합니다. 이를 통해 컴퓨터가 알아들을 수 있는 주소로 매핑이 가능해집니다.

TCP(Transmission Control Protocol)

전송 제어 프로토콜로 인터넷상에서 데이터를 메세지형태로 보내기 위해 IP와 함께 사용하는 프로토콜(규약)입니다. 일반적으로 TCP와 IP를 함께 사용하는데, IP가 데이터의 배달을 처리한다면 TCP는 *패킷을 추적하고 관리합니다.
TCP는 클라이언트와 서버가 연결된 상태에서 데이터를 주고받는 연결 지향 프로토콜로 인터넷 환경에서 기본으로 사용합니다.
*패킷 : 정보 기술에서 패킷 방식의 컴퓨터 네트워크가 전달하는 데이터의 형식화 된 블록을 나타내며, 컴퓨터 간 데이터를 주고 받을 때 네트워크를 통해 전송되는 데이터 조각을 패킷이라고 합니다.

Request 와 Response

HTTP 프로토콜은 일반적으로 위에서 언급한 TCP/IP 통신 위에서 동작합니다. HTTP 프로토콜로 데이터를 주고받기 위해서는 아래와 같이 브라우저와 서버 사이에서 요청(Request)을 보내고 응답(Response)을 받아야 합니다. TCP 레이어에서 요청이 성공적으로 이루어지면 Response가 옵니다.

Request는 클라이언트에서 서버로 전송하는 메시지입니다.
GET, POST, PUT, DELETE 등과 같은 메서드를 가지고 있으며, 이러한 메서드로 서버에 존재하는 자원에 대한 요청, 생성, 변경, 삭제 등의 동작을 요청합니다.
또한 이러한 메서드들과 함께 주로 URL 또는 프로토콜, 포트, 도메인의 절대경로 등의 타겟을 요청하게 됩니다.
Response는 클라이언트의 요청에 대해 서버가 보내는 응답 정보입니다. 상태 코드와 데이터를 담은 Body를 함께 보내게 되는데, 이 때 오는 상태 코드에 따라서 프론트엔드에서 처리해야하는 동작이나 에러처리가 달라집니다.
주요 상태 코드는 대략적으로 다음과 같습니다.

• 2xx : 성공
  200번대는 대부분 성공을 의미합니다. 200번은 GET 요청에 대한 성공을 의미하며, 다른 200번대의 상태 코드는 추가적인 상태를 알려주거나 일부 데이터를 반환하기도 합니다.
• 3xx : 리다이렉션
  300번대는 리다이렉션을 주로 나타내며, 위에서 언급한 것처럼 새로운 URL에 대한 요청을 유도합니다.
• 4xx : 클라이언트 에러
  400번대는 클라이언트 에러입니다. 주로 유효하지 않은 자원을 요청하거나, 잘못된 요청에 대해 응답하는 상태 코드들입니다.
• 5xx : 서버 에러
  500번대는 서버 단에서 오류가 난 경우가 대부분입니다.

Processing

페이지 렌더링이 실행되는 단계입니다. HTML, CSS 파일을 파싱하여 DOM과 CSSOM을 만들고, 자바스크립트 기능이 추가되고, 렌더 트리가 만들어집니다. 

Load

브라우저가 준비된 파일들을 사용자가 알아볼 수 있는 형태로 화면에 보여주는 과정으로, 이미지나 동영상까지 모두 읽는 단계입니다. 여기서 window 객체의 load 이벤트가 발생합니다.

 

---

Reference

https://jeewonscript.tistory.com/4?category=989921 

https://velog.io/@pse/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%9D%98-%EB%A0%8C%EB%8D%94%EB%A7%81-%EA%B3%BC%EC%A0%95

https://www.w3.org/TR/navigation-timing-2/#processing-model

https://jooonho.com/js/2021-01-24-timing-api/

https://yeoulcoding.tistory.com/167