[ Web & Mark Up ] 웹 브라우저의 동작 원리.
∇ 웹 브라우저.
목 차
1. 웹 브라우저에 웹 페이지가 표시되기까지
2. 웹 브라우저의 구조.
3. 네비게이션
4. HTTP 요청/응답
5. 파싱
6. 렌더링
7. 디스플레이
1. 웹 브라우저에 웹 페이지가 표시되기까지.
★ 주소창에 주소를 치면, 웹 브라우저는 다음 단계에 따라서 요청된 웹 페이지를 로딩합니다.
1. 네비게이션.
: 가장 먼저 내가 요청한 url주소 값에 맞는 웹 페이지가 실제로 위치한 곳을 찾습니다.
이때 DNS(도메인 이름 시스템)의 도움을 받습니다.
2. HTTP 요청 및 응답
: 주소를 찾았으니, 이제 웹 페이지에 해당하는 리소스를 가져올 수 있습니다.
HTTP 프로토콜에 따라 전송 됩니다.
3. 파싱.
: 응답 받아온 리소스들을 구문 분석해서
브라우저 환경이 이해할 수 있는 DOM, CSSOM 으로 변환시킵니다.
4. 렌더링
: 파싱과 함께 렌더링이 진행됩니다. 렌더 트리를 이용해서 문서의 시각적인 구조를 만듭니다.
5. 디스플레이
: 웹 페이지 등장.
2. 웹 브라우저의 구조.
∇ 사용자 인터페이스 :
주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 웹페이지를 보여주는 창을 제외한 나머지 부분.
∇ 브라우저 엔진 :
사용자 인터페이스와 렌더링 엔진 사이에 동작을 제어합니다
∇ 렌더링 엔진 :
요청한 콘텐츠를 불러서 표시합니다
예를 들어, HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시합니다.
∇ 통신 :
HTTP 요청 같은 네트워크 호출에 사용됩니다.
플랫폼 독립적인 인터페이스이고 각 플랫폼의 하부에서 실행됩니다.
∇ UI 백엔드 :
콤보 박스나 창 같은 기본 장치를 그립니다.
플랫폼에 명시하지 않은 일반적인 인터페이스로서 OS 사용자 인터페이스 체계를 사용합니다.
∇ 자바스크립트 해석기 :
자바스크립트 코드를 해석하고 실행합니다.
∇ 자료 저장소 :
자료를 저장하는 계층입니다.
쿠키 등 모든 종류의 자원을 하드 상에 저장합니다.
HTML5 명세에 웹 데이터 베이스가 정의되어 있습니다.
3. 네비게이션.
∇ DNS
- 내가 요청한 웹 페이지의 실제 위치를 찾아내야 페이지를 로딩할 수 있을텐데,
- 주소창에 입력한 주소는 도메인 이름으로 변환하여 사용하는데
이를 고유한 IP주소 값으로 변환해서 위치를 찾아줘야 합니다;
이 때 활용되는 것이 DNS(Domain Name System)입니다.
- "DNS"는 도메인 이름과 IP 주소 사이의 매핑을 관리하는 시스템으로서
웹 브라우저가 DNS상에 할당 받은 도메인 이름을 넘기면 사전에 매핑된 IP 주소를 반환합니다.
∇ TCP 3-way Handshake
- 실질 주소를 알게 되었으니, 리소스를 요청합니다.
- 이 리소스 값을 안정적으로 받아오기 위해서는 연결을 성립해야 합니다.
이 연결을 위해 필요한 것이 "TCP 3-way hanshake"입니다.
- "TCP 3-way handshake"는 서버-클라이언트 사이에 데이터를 송수신할 준비가 되어 있다는 것을
보장하기 위해 필요한 과정입니다.
∇ TLS Negotiation
- 연결에는 보안이 필요합니다.
통신을 암호화하기 위해서는 추가로 "TLS handshake"가 필요합니다.
- "TLS(Transport Layer Security)"란 데이터를 보호하기 위해 설계된 보안 프로토콜로서
TLS handshake 과정이 끝나면 서버의 보안 신뢰성이 증명됩니다.
- 이 과정을 거치면,
보안에 취약한 HTTP가 아닌 HTTPS(HTTP+TLS)를 통해 데이터를 주고 받을 수 있게 됩니다.
4. HTTP 요청 및 응답.
∇ HTTP Request
- HTPP 메서드 GET를 사용한 데이터 통신을 통해 리소스를 서버에서 받아옵니다.
- 프로토콜에 따라 GET과 URI( Uniform Resource Identifier)를 사용해서
서버에 리소스를 요청합니다.
curl -X GET -v https://wecode.co.kr/
# GET이 기본 메서드이므로 -X GET 옵션을 설정할 필요가 없다.
# 여기에서는 어떤 메서드인지 명확하게 보여주기 위해 사용했다.
* Connection state changed (HTTP/2 confirmed)
* Copying HTTP/2 data in stream buffer to connection buffer after upgrade: len=0
* Using Stream ID: 1 (easy handle 0x7ffff12867c0)
> GET / HTTP/2
> Host: wecode.co.kr
> user-agent: curl/7.68.0
> accept: */*
∇ HTTP Response
- 내가 GET으로 보낸 요청이 유효하다면, 웹 서버에서 리소스를 응답해서 보내줍니다.
리소스를 정확히 받아온다면 웹 페이지의 HTML을 얻게 됩니다.
* Connection state changed (MAX_CONCURRENT_STREAMS == 128)!
< HTTP/2 200
< date: Sat, 14 Aug 2021 06:11:39 GMT
< content-type: text/html; charset=UTF-8
< content-length: 9063
< x-powered-by: Express
< accept-ranges: bytes
< cache-control: public, max-age=0
< last-modified: Tue, 03 Aug 2021 06:09:14 GMT
< etag: W/"2367-17b0aa163bf"
<
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><meta property="og:url" content="https://wecode.co.kr/"/><meta property="og:type" content="website"/><meta property="og:title" content="WeCode | 위코드 | 코딩 부트캠프 | 코딩교육 | 온라인 부트캠프"/><meta property="og:description" content="wecode(위코드)의 부트캠프를 통해 개발자로서 커리어를 시작하세요."/>
...
5. 파싱
웹 브라우저가 HTTP를 통해 리소스를 받아왔으므로, 이를 이해하고 사용할 수 있도록 구문 분석을 시작해야 합니다.
HTML 문서를 분석하기 위해 "파서"를 이용하고 그 결과로 "파싱 트리(Parse Tree)가 만들어집니다.
∇ DOM Tree
- 먼저 HTML 마크업을 태그, 속성을 기준으로 토큰화시킨 다음 "DOM Tree"를 구축합니다.
- "DOM(Document Object Model)"은 문서 내 서로 다른 태그들 사이의 관계 및 계층 구조를
노드와 객체로 표현합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="style.css" rel="stylesheet" />
<title>Critical Path</title>
</head>
<body>
<p>Hello <span>web performance</span> students!</p>
<div><img src="awesome-photo.jpg" /></div>
</body>
</html>
∇ CSSOM Tree
- CSS도 선택자, 선언 등을 토큰화해서 "CSSOM Tree"를 구축합니다.
- "CSSOM( CSS Object Model )은 문서 내용이 보여지는 스타일을 표현합니다.
body {
font-size: 16px;
}
p {
font-weight: bold;
}
span {
color: red;
}
p span {
display: none;
}
img {
float: right;
}
∇ Render Tree
- "DOM Tree" 와 "CSSOM Tree"를 "Render Tree"에 결합하여 렌더링을 준비합니다.
- 웹 페이지에 표시될 DOM 콘텐츠와 CSSOM 스타일이 모두 포함됩니다.
6. 렌더링
구축된 "Render Tree"를 사용해서, HTML * CSS * JavaScript가
사용자와 상호작용하는 웹 페이지로 변환됩니다.
∇ LayOut.
"Render Tree"가 뷰포트 내에 표현되기 위해서 정확한 '위치'와 '크기'를 계산하는 과정이 'LayOut"입니다.
트리의 루트에서 시작해서, 트리를 순회하며 계산합니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Critial Path: Hello world!</title>
</head>
<body>
<div style="width: 50%">
<div style="width: 50%">Hello world!</div>
</div>
</body>
</html>
-> 뷰포트 넓이가 100%일 때,
첫번째 div는 뷰포트 너비의 50%로,
두번째 div 상위 노드인 첫번째 div 너비의 50%로 계산됩니다.
-> 최상위 뷰포트가 달라질 경우, 상대적인 값들인 %, vh, vw 등 을 재계산해야 하는데
이 때문에 "Reflow"라고 부르기도 합니다.
∇ Paint
- 렌더링의 마지막 단계로서 계산된 위치와 크기값을 화면에 실제 픽셀로 변환합니다.
- 이 단계의 이름이 Paint인 이유는, 고려해야 할 또다른 중요한 정보가 있기 때문입니다.
- 실제 그림을 그리는 것처럼,
웹 브라우저도 화면에 정보를 띄울 때 어떤 순서로 그려야 할지 목록을 작성합니다.
순서를 고려하지 않으면, 객체들의 z 값 위상부터 모든게 엉망이 되어버립니다.
- HTML, CSS 속성에 따라서 레이어를 층층히 쌓아주고,
여러 레이어들을 겹쳐서 합성한 하나의 화면이 그려지게 됩니다.
7. 디스플레이
마침내 화면이 사용자에게 최종적으로 보여지게 되고, 상호작용이 가능해집니다.
'3D Web Developer > Web & MarkUp' 카테고리의 다른 글
| [ Web & MarkUp ] "HTML" 작성을 위한 기본 요소. (2) | 2024.10.21 |
|---|---|
| [ Web & MarkUp ] DOM ( Document object Model ) 완벽 정복하기. (0) | 2024.10.18 |
| [ Web & Mark UP ] 브라우저 환경과 렌더링 엔진의 동작 원리. (0) | 2024.10.17 |
| [ Web & Mark UP ] HTML 의 전반적인 특징들 정리. (1) | 2024.10.17 |
| [ Web & MarkUp ] HTML이란? (2) | 2024.10.15 |