1. 주소 입력 + HTTP 요청
주소창에 www.google.com 을 쳐서 서버에 request를 보낸다.
실제로는 https의 생략된 포트 443으로 www.google.com:443 으로 요청이 된다.
HTTP 요청 메시지를 생성하고
HTTP 메시지를 전송한다.
-> 웹 브라우저가 HTTP 메시지를 생성하고
-> SOCKET 라이브러리를 통해 전달(TCP/IP 연결)
-> TCP/IP 패킷 생성(HTTP 메시지 포함)
-> LAN 드라이버와 장비를 통해 서버로 전송
그러면 서버가 요청(request)패킷을 받고 응답(response) 패킷을 전송한다.
응답 패킷이 도착하면 다음 과정이 진행된다.
2. HTML 파일 다운로드
HTML, JSON, 이미지 등을 먼저 다운로드 받는다.
가장 먼저 다운받는 것은 HTML이다.
3. CSS, JS 다운로드
<html>
<head>
<link href="www.google.com/..."></link>
<script src="www.google.com/..."></script>
</head>
<body>
.
.
</body>
</html>4. Parsing - HTML, CSS 파싱해 각각 Tree 생성
HTML 파일을 해석하여 DOM(Document Object Model) Tree를 구성하는 단계이다.
HTML에 CSS가 포함되어 있다면 CSSOM(CSS Object Model) Tree 구성도 진행한다.
5. Style - Render Tree 생성
Parsing 단계에서 생성된 DOM Tree 와 CSSOM Tree를 매칭시켜서 Render Tree를 구성
Render Tree:
실제로 화면에 그려질 Tree
display: none 을 가지는 DOM 객체는 Render Tree에서 탈락한다.
6. Layout - Render Tree 기반으로 DOM 객체의 위치를 잡는 과정
Render Tree를 화면에 어떻게 배치할 것인지 DOM 객체의 정확한 위치와 크기를 계산한다.
7. Paint - 실제로 요소를 그리는 과정
Layout 단계에서 계산된 값을 이용해 렌더 트리의 각 노드를 화면상의 실제 픽셀로 변환한다.
이 때 픽셀로 변환된 결과는 하나의 레이어가 아니라 여러개의 레이어로 관리된다.
스타일이 복잡할 수록 Paint 과정의 시간이 늘어난다.
8. Composite - Layer를 합성해 실제 화면에 나타내는 과정
Paint 단계에서 생성된 레이어를 합성하여 실제 화면에 나타낸다.
'Computer Science > Network' 카테고리의 다른 글
| [Network] TCP & UDP 차이 / 3-way handshaking & 4-way handshaking (0) | 2023.07.18 |
|---|---|
| 네트워크 - GET 과 POST 의 차이점 (0) | 2023.07.10 |
| UDP 헤더 (0) | 2022.08.09 |
| 컴퓨터 네트워크 2강 정리 (0) | 2022.08.02 |
| 컴퓨터 네트워크 1강 정리 (0) | 2022.08.02 |
