브라우저 렌더링 과정

Q. www.naver.com 을 주소창에 입력하면 어떻게 될까요?

 

[통신 과정]

1. 사용자가 주소창에 URL을 입력하면 DNS 조회를 해서 요청한 페이지의 자원이 어디에 위치하는지 찾는다.

즉 브라우저는 입력된 도메인 주소가 실제로 어떤 컴퓨터에 연결되어 있는지 DNS 서버를 통해 IP 주소를 받아온다.

 

2. 브라우저는 IP 주소를 이용해 해당 서버(네이버)에 TCP 연결을 요청한다. 

3way hand shake 과정을 통해 클라이언트(브라우저) 와 서버가 데이터를 주고받을 수 있게 된다. (연결이 된다) 

HTTPS를 이용한 보안성있는 연결을 위해서는 TLS 협상도 필요하다.

 

3. 웹서버로 한번 연결이 성립되면, 브라우저는 HTTP GET 리퀘스트를 보낸다. 

브라우저가 데이터 덩어리를 받으면 수신된 정보를 분석하고 화면에 보여주기까지 렌더링 과정을 거친다.

 

[렌더링 과정]

1. 브라우저는 HTML와 CSS을 파싱하여 DOM tree, CSSOM tree 를 생성한다.

( 이 때 HTML, CSS 파일은 단순한 텍스트이므로 연산과 관리를 위해 Parser를 통해 Object Model로 만든다)

 

3. 위 두개의 요소들을 조합해 렌더 tree를 생성한다.

Render Tree에는 스타일 정보가 설정되어 있으며, 실제 화면에 표현되는 노드들로만 구성된다.

 

4. 레이아웃 (리플로우): Render Tree 노드들이 가지고 있는 스타일과 속성에 따라 브라우저 화면에 출력될 위치와 크기를 계산한다.

 

5. 페인팅 :  Layout 계산이 완료되면 요소들을 실제 화면에 그린다.

이전 단계에서 요소들의 위치와 크기, 스타일 계산이 완료된 렌더트리를 이용해 실제 값을 채워넣는다. (텍스트, 색, 이미지, 그림자 효과 등 모두 처리)

 

https://velog.io/@jeonsangmin_/cs-%EB%A9%B4%EC%A0%91-%EC%A7%88%EB%AC%B8