주소창에 www.naver.com을 입력하면 생기는 일

🖌 오늘의 주제

주소창에 www.naver.com를 입력하고 화면에 네이버 홈페이지가 뜨기까지의 과정을 알아보려 한다.

📌 1. 네트워크 호출

주소창에 입력한 텍스트가 URL일 경우 브라우저는 네트워크 호출을 실시한다.

네이버 홈페이지를 화면에 출력하기 위한 정보들(HTML, CSS, JavaScript 등)은 브라우저가 가지고 있는게 아니고 네이버 서버에 보관 중이라 이 정보를 받아오기 위함이다.

브라우저가 네이버 서버와 네트워크 통신을 하려면 우선 네이버 서버 컴퓨터의 IP주소를 알아야하는데, 이를 위해 브라우저는 우선적으로 DNS 서버와 통신을 하게 된다.

DNS 서버와의 통신으로 네이버 서버 컴퓨터의 IP를 얻은 브라우저는 네이버 서버에 해당 도메인을 출력하기 위한 데이터를 요청하게 되는데, 이를 HTTP Request라고 한다.

요청을 받은 네이버 서버는 브라우저에게 요청 받은 데이터를 보내주는데, 이를 HTTP Reply 또는 HTTP Response라고 한다.

📌 2. 렌더링 프로세스

네이버 서버로부터 데이터를 전달 받은 브라우저는 이제 화면에 네이버 홈페이지를 보여주어야 한다.

이를 위해서는 전달 받은 HTML, CSS, JavaScript 등 텍스트 문서를 컴퓨터가 이해할 수 있도록 파싱이라는 과정을 거치게 된다.

기본적으로 HTML 파싱을 진행하게 되고 그 과정에서 link태그를 만나면 진행중이던 작업을 중단하고 CSS 파싱을 진행 후 다시 HTML 파싱을 진행한다.

JavaScript 파싱 또한 상기 CSS 파싱과 마찬가지로 HTML 파싱 진행 중 script태그를 만났을 때 기존 작업을 중단하고 JavaScript 파싱을 진행한다.

이때 CSS 파싱과 다른점은 파싱의 주체인데 HTML과 CSS는 랜더링엔진이, JavaScript는 JavaScript엔진이 파싱을 진행한다.

파싱을 진행한 브라우저는 각각 DOM트리, CSSOM트리, AST를 생성하고 서로 결합하여 렌더트리를 생성한다.

📌 3. 레이아웃

렌더트리 생성을 마친 브라우저는 전체 웹페이지 화면 안에 렌더트리 내 각각의 노드의 크기와 위치를 계산하고 화면에 배치하는데, 이를 레이아웃이라고 한다.

📌 4. 페인트

레이아웃 과정을 통해 배치된 노드를 화면에 실제 픽셀로 변환하여 사용자에게 보여주는 과정을 페인트라고 한다.