네트워크 관점

브라우저에서 주소창에 URL을 넣고 엔터를 치면 네트워크 관점에서 다음과 같은 일이 벌어진다.

1. www.google.com 를 치고 엔터

2. DNS 서버에서 위 도메인 네임에 대응하는 IP주소를 찾는다.

   1. 루트 서버부터 재귀질의를 통해 IP주소를 찾는다.
   2. 실제 통신은 특정 기기와 하기 때문에 해당 기기의 물리주소인 MAC 주소를 ARP를 통해 가져와 통신하게 된다.

3. 우선 찾은 IP주소로 TCP Connection을 맺는다.

   1. TCP는 3-way handshake를 통해 Connection이 완료됬다는 것을 확인한다. (3가지 방법을 통해 악수함(연결))

   자세한 내용: ‣

4. TCP Connection이 완료 되면 GET 요청을 통해 해당 주소의 resource(HTML, CSS, Javascript)를 요청한다.

5. 서버는 그 응답으로 resource(HTML, CSS, Javascript)를 보낸다.

렌더링 관점

위 과정을 통해 받은 resource를 가지고 렌더링을 진행한다.

1. HTML 파일은 HTML 파서를 통해 파싱하고, CSS파일은 CSS 파서를 통해 파싱한다.
2. 파싱하는 과정에서 script나 이미지 파일을 만나면 서버에 추가적인 resource를 요청한다.
3. HTML 파싱을 통해 생서된 DOM Tree와 CSS 파싱을 통해 생성된 스타일 시트를 attatchment를 하여 render tree를 만든다.
   1. render tree는 dom 트리와 1:1로 매핑되지 않는다(head태그 같은 경우 표시되지 않음)
   2. 이 과정에서 렌더 객체의 스타일을 적용한다.(크기, 색상)
4. 이렇게 생성된 렌더 객체는 위치가 없기에 위치를 계산하여 배치한다. (reflow)
   1. 위에서 아래 왼쪽에서 오른쪽 흐름대로 상위 객체부터 배치된다.
5. 배치 후 배경색, 테두리와 같은 그리기를 실행한다(repaint)

Reflow, Repaint