🤷‍♀️ 개념공부:https://www.naver.com/을 브라우저 주소창에 입력하고 네이버 홈페이지가 렌더링 되기까지 일어나는 작업들!

https://www.naver.com/는 리소스의 위치를 나타내는 url(Uniform Resource Locator)이다.
그렇다면, 우리가 브라우저 주소창에 https://www.naver.com/ 를 입력하여 일어나는 과정을 크게 두가지로 나눠 살펴보자.

1️⃣ 첫번째는 서버로부터 리소스를 전달받는 과정이고
2️⃣ 두번째는 전달받은 리소스를 브라우저가 렌더링하는 과정이다.

1️⃣ 서버로부터 리소스를 전달받는 과정

홈페이지의 리소스들은 사용자의 컴퓨터에 저장되어 있지 않고, 천키로 이상 떨어진 데이터센터에 저장되어 있을 수도 있다. 이렇게 멀리 떨어져있는 데이터들이 어떻게 유저의 모바일이나 데스크탑으로 정보가 전달되는 것인지 살펴보자!

(1) 사용자가 URL을 입력한다.

(2) 웹브라우저가 서버의 URL에서 호스트명www.naver.com을 추출한다.

(3) 웹브라우저는 DNS 서버에 요청을 보냄으로써 IP를 알아내고, 서버의 호스트명을 IP로 변환한다.

✋IP 주소란 무엇일까?

네트워킹이 가능한 장비(PC, 서버장비, 스마트폰, 테블릿 등 인터넷에 연결되는 모든 장비)를 식별하는 주소이다.

ip 주소는 마치 집주소와 같이 컴퓨터의 위치를 특정하는 일종의 주소로 통신기에 하나씩 부여가되고, 12개의 숫자로 이루어져있다.

다음은 ping을 통해 네이버의 ip주소를 알아본 것이다.
네이버 ip주소: 125.209.222.142

✋ DNS(Domain Name System)란 무엇일까?

도메인 네임? ip주소는 12개의 숫자로 이루어져 있어 사람이 이를 다 기억하기 힘들다. 이러한 문제를 해결하기 위해 우리는 도메인네임을 사용한다. 덕분에 125.209.222.142와 같이 복잡한 ip주소가 아닌 naver.com을 통해 웹사이트에 접속할 수 있다.

그렇다면 naver.com만을 보고 ip주소를 어떻게 알아낼 수 있을까? 이는 DNS서버를 통해 알수있다. DNS 서버는 마치 사람 이름만 알고 있을 때 검색을 통해 연락처를 찾을 수 있는 전화번호부와 같이 도메인 네임으로 ip주소를 찾을 수 있게 해준다.

(4) 웹브라우저는 URL에서 포트번호(있다면)를 추출한다.

웰드와이드웹 url은 기본 포트값으로 80을 사용하고, 이는 url에서 생략할 수 있다.

✋ 포트번호: 데이터를 받을 프로세스를 식별하는 단위이다.
ex) 택배를 시킨다고 할때, ip주소는 집주소와 같고 포트번호는 택배를 받는 사람(엄마인지 나인지)에 해당한다.

(5) 웹브라우저는 웹서버와 TCP 커넥션을 맺는다.

✋ TCP는 전송계층의 프로토콜로 애플리케이션 계층 프로토콜인 HTTP의 하위 계층이다. TCP는 오류없이 신뢰있는 데이터 전송과 순서에 맞는 전달, 조각나지 않는 데이터 스트림 등을 보장한다.

(6) 웹브라우저는 서버에 HTTP 요청을 보낸다.

(7) 서버는 웹브라우저에게 HTTP 응답을 돌려준다.

(8) 커넥션이 닫히면, 웹브라우저는 문서를 보여준다.

이때 문서는 광섬유 케이블을 통해 직접 전달 되거나, 광섬유 케이블에 연결된 와이파이에 접속하여 전달 받을 수 있다.

2️⃣ 전달받은 리소스가 브라우저에 렌더링되는 과정

1️⃣ 과정으로부터 브라우저가 리소스를 전달 받은 후 일어나는 일은, 우리가 홈페이지를 볼 수 있도록 화면에 이 리소스가 그려지는 과정이다. 이러한 과정은 브라우저의 랜더링 엔진에서 동작한다.

✋ 렌더링 엔진: 요청한 콘텐츠를 표시. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시함.
(파이어폭스는 모질라에서 직접만든 게코(Gaeko) 엔진을 사용, 사파리와 크롬은 웹킷(Webkit) 엔진 사용)

(1) 렌더링 엔진은 통신으로부터 HTML과 CSS와 같은 요청한 문서의 내용을 얻는다.

(2) 렌더링 엔진은 HTML 문서를 파싱하고 "콘텐츠 트리" 내부에서 태그를 DOM 노드로 변환한다. 그 다음 외부 CSS 파일과 함께 포함된 스타일 요소도 파싱하고 CSSOM 모델로 변환한다.

(3) 스타일 정보와 HTML 표시 규칙은렌더 트리라고 부르는 또 다른 트리를 생성하는데, 이는 DOM 트리가 구축되는 동안 브라우저에 의해 구축된다. 그 전에 DOM 노드와 시각 정보를 연결하는 과정인 어테치먼트를 한다.

✋ 렌더 트리는 표시해야 할 순서와 문서의 시각적인 구성 요소로써 올바른 순서로 내용을 그려낼 수 있도록 하기 위한 목적이 있다.
(게코는 렌더 트리를 "형상 트리(frame tree)"라고 부른다.)

✋ 렌더 객체: 렌더트리의 구성요소로 렌더러라고도 불리며 색상 또는 너비, 높이, 면적과 같은 시각적 속성이 있는 기하학적 정보를 포함한다. (게코에서는 이러한 각 요소를 "형상(frame)"이라고 한다.)

렌더러는 자신과 자식 요소를 어떻게 배치하고 그려내야 하는지 알고 있는데, 구조는 다음과 같다.

class RenderObject { virtual  
    void layout(); virtual
    void paint(PaintInfo); virtual
    void rect repaintRect();
    Node * node; //the DOM node
    RenderStyle * style; // the computed style
    RenderLayer * containgLayer; //the containing z-index layer
}

(4) 렌더러가 생성되어 랜더 트리에 추가될 때 크기와 위치 정보는 없는데 이런 값을 계산하는 것을 배치(layout) 또는 리플로(게코에서는 reflow)라고 부른다.

이 과정에서 뷰포트내에 각 노드들이 출력될 정확한 위치와 크기를 계산한다.

(reflow: 어떠한 액션, 이벤트를 통해 html 요소의 크기, 레이아웃이 수정되면 그에 영향받는 자식, 부모 노드 포함하여 레이아웃 과정 다시 수행 (렌더트리 요소 위치 다시 계산))

(5) Paint: 마지막으로 계산한 레이아웃 요소들을 실제 화면에 그리는 과정이 진행된다.

그리기 단계에서는 화면에 내용을 표시하기 위한 렌더 트리가 탐색되고 렌더러의 "paint" 메서드가 호출된다. 그리기는 UI 기반의 구성 요소를 사용한다.

(repaint : 리플로우 반영 위해 paint 과정 다시 수행. 배경색, visibility 같이 레이아웃에 영향 없는 것은 repaint 만 수행)

참고자료

HTTP 완벽 가이드

https://www.youtube.com/watch?v=x3c1ih2NJEg

https://d2.naver.com/helloworld/59361 (+그림출처)