💡 주소창에 naver.com을 치면 어떤 과정을 거쳐서 네이버 화면이 나타나게 될까?
위 사진을 기본으로 단계를 따라가보자!
1. 사용자가 naver.com을 입력
1-1. 리다이렉트
리다이렉트가 있다면 리다이렉트를 시키고, 그렇지 않다면 다음 단계로 넘어가게 된다.
❓리다이렉트란?
리다이렉트(Redirect)는 사용자가 처음 요청한 URL이 아닌, 다른 URL로 보내는 것을 뜻함. 예를 들어, 웹사이트 A의 주소로 접속한 사용자를 웹사이트 B로 이동시키는 것. URL 단축 서비스, 더 이상 업데이트되지 않는 페이지, 사이트 도메인 변경 때 리다이렉트를 유용하게 사용할 수 있음. 예시로 결제 과정에서도 사용자가 결제를 완료하면, 결제창에서 성공 또는 실패 페이지로 이동시키는 리다이렉트 단계가 있음.
1-2. 캐싱
해당 요청이 캐싱이 가능한지, 가능하지 않은지를 파악한다.
캐싱이 이미 된 요청이라면 캐싱된 값을 반환하고, 그렇지 않은 새로운 요청이라면 다음 단계로 넘어간다.
❓ 캐싱이란?
요청돤 값의 결과값을 저장하고, 그 값을 다시 요청하면 다시 제공하는 기술
브라우저캐시(쿠키, 로컬스토리지 등을 포함한 캐시)와공유캐시(서버 앞단에 프록시서버가 캐싱을 하는 것 등)로 나눠짐
2. DNS
DNS(Domain Name System)
컴퓨터는 IP주소로 서로의 위치를 확인하고 통신하는데, 사람들이 보기에는 복잡하고 외우기 어렵기 때문에 텍스트로된 도메인 네임을 사용한다.
이러한 도메인 네임을 컴퓨터가 이해할 수 있도록 IP주소로 변환해야하는 작업이 필요하다.
도메인 네임과 함께 해당하는 IP 주소값을 한 쌍으로 저장하고 있는 DNS를 사용하여 IP주소를 찾는다.
🔜DNS로부터 IP주소 획득
3. HTTP 요청
획득한 IP(125.209.222.141)에 해당하는 HTML 파일을 달라고 요청을 보낸다.
이 HTTP 요청 메시지는 TCP 통신을 통해 네이버 서버에 요청을 하게 된다.
4. HTTP 응답
우리가 보낸 요청에 대해 네이버 서버도 응답을 보내준다.
이렇게 받은 데이터를 브라우저에 넣고 렌더링 프로세스를 거쳐 출력하게 된다.
5. 렌더링 프로세스
5-1. HTML과 CSS를 파싱하여 렌더트리를 구축하고 레이아웃 과정을 거쳐 Paint하게 된다.
❓파싱
브라우저는 HTML,CSS 등 단순한 텍스트 문서를 이해하지 못한다.
그래서 이 문서를 브라우저가 이해할 수 있는 구조로 변환해주는 과정이 필요하다.
이 과정을파싱(Pasing)이라고 한다.
HTML을 파싱하여 DOM 트리를 생성한다.
그 과정 중 link태그를 만나면, DOM 생성이 잠시 중단되고 CSS를 파싱하여 CSSOM 트리를 생성한다.
또한 HTML 파싱과정에서 script 태그를 만나면, DOM 생성을 잠시 중지하고 서버에서 해당 JavaScript 리소스를 브라우저 엔진으로부터 받아온다. 그리고 JavaScript 엔진에게 제어권을 넘겨준다.
JavaScript 엔진은 받아온 JS 리소스를 파싱하여 AST (추상 구문 트리) 를 생성하고
이를 바이트코드로 변환해 실행한다.
JavaScript 파싱이 종료되면 렌더링 엔진은 다시 제어권을 돌려받고 DOM 생성을 이어나간다.
만일 script 태그를 body 태그의 중간에 작성할 경우, HTML 파싱이 끝나지 않은 상태에서 JavaScript로 인해 DOM이 조작되어 에러가 발생할 위험이 생긴다.
따라서 script 태그는 반드시 body 태그 내부의 최하단에 위치해야 한다. 혹은 script 태그에 defer 속성을 부여하는 방법도 있다.
5-2. 렌더트리(Render Tree) 생성
HTML과 CSS의 파싱 과정이 모두 끝나면, 각각의 결과물인 DOM 트리와 CSSOM 트리를 서로 결합하여 Render Tree를 생성한다.
5-3. 레이아웃(Layout)
랜더 트리 생성이 끝나면, 전체적인 웹 페이지 화면 안에서 렌더 트리 내 각 노드의 위치, 크기 (너비와 높이) 를 계산하고, 이를 화면에 배치하는 레이아웃 (Layout) 과정이 진행된다.
🔜 레이아웃은 렌더 트리의 노드들을 화면에 배치하는 과정이다.
5-4. 페인트(Paint)
마지막으로, 레이아웃 과정에서 계산된 정보들을 바탕으로 각 노드를 화면에 그려주는 페인트 과정이 진행된다.
페인트 과정 중 화면의 특정 위치에 여러 개의 노드가 함께 그려지는 경우, 여러 레이어를 만들고 이를 다시 합성하는 방식으로 작업이 이루어진다.
이 과정이 끝나면 브라우저 화면에 네이버 페이지가 보여지게 된다.
🤔예상 질문
주소창에 naver.com을 치면 어떤 일이 일어날까요?우선 리다이렉트가 없는지 확인 후, 캐싱된 데이터가 있는지 확인합니다.
있다면, 캐싱된 데이터를 반환하고 그렇지 않다면 DNS서버의 DNS 시스템을 이용해서 naver.com이라는 도메인 네임에 맞는 IP주소를 가져옵니다.
해당 IP 주소에 HTML 파일을 달라고 HTTP 요청을 하고, 받은 데이터로 브라우저 렌더링 과정을 진행합니다.
HTML 파일을 파싱하면서 DOM 트리를 생성하고 link 태그를 만나게 된다면 DOM 트리 생성을 잠시 중단한 뒤 CSS 파싱을 통해 CSSOM 트리를 생성합니다.
또한 script 태그를 만나게 된다면 JavaScript엔진에게 제어권을 넘겨준 뒤에 JS를 파싱해 AST 트리를 생성합니다.
파싱이 끝나면 DOM 트리와 CSSOM 트리를 결합해 Render 트리를 만들고 각각의 노드들의 위치를 지정하는 레이아웃 과정을 거쳐 최종적으로 화면에 paint하여 네이버 화면을 사용자의 브라우저에 출력하게 됩니다.
💻출처
주소창에 naver.com을 치면 일어나는 일을 쉽게 이해해보자
www.naver.com을 주소창에 치면 무슨 일이 일어날까요?
[web]주소창에 naver.com을 치면 일어나는 일
