38-1장 브라우저의 렌더링 과정 - 한수지

docs/38_브라우저의 렌더링 과정/한수지.md

@@ -0,0 +1,99 @@
+## 38장. ✨ 브라우저의 렌더링 과정
+
+`Node.js`는 구글의 V8 자바스크립트 엔진으로 빌드된 `자바스크립트 런타임 환경`이다.
+
+Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다.
+
+하지만, **자바스크립트가 가장 많이 사용되는 분야**는 역시 **웹 브라우저 환경에서 동작하는 웹페이지/애플리케이션의 클라이언트 사이드**이다.
+
+대부분의 프로그래밍 언어는 운영체제나 가상머신 위에서 실행된다.
+
+> 그렇지만, **웹 애플리케이션의 클라이언트 사이드 자바스크립트**는 **브라우저에서 HTML, CSS와 함께 실행**된다.
+
+따라서 `브라우저의 환경을 고려`할때 `더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍`이 가능해진다.
+
+- `파싱` : 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어들여 실행하기 위해 **텍스트 문서의 문자열을 토큰(Token)으로 분해**하고, **토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성**하는 일련의 과정
+
+- `렌더링` : **HTML, CSS, 자바스크립트로 작성된 문서를 파싱**하여 **브라우저에 시각적으로 출력**하는 것
+
+🔎 **브라우저의 렌더링 과정**
+
+![](https://velog.velcdn.com/images/ninto_2/post/b11ffc1f-8372-43e8-9d3f-614985bdcc49/image.png)
+
+1. **브라우저**는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 `렌더링에 필요한 리소스를 요청`하고 `서버로부터 응답`받는다.
+
+2. **브라우저의 렌더링 엔진**은 `서버로부터 응답된 HTML, CSS를 파싱`하여 `DOM과 CSSOM을 생성`하고, 이들을 `결합하여 렌더 트리를 생성`한다.
+
+3. **브라우저의 자바스크립트 엔진**은 `서버로부터 응답된 자바스크립트를 파싱`하여 `AST(Abstract Syntax Tree)를 생성하고 바이트코드로 변환하여 실행`한다. 이때 **자바스크립트**는 `DOM API를 통해 DOM이나 CSSOM을 변경`할 수 있고, `변경된 DOM이나 CSSOM은 다시 렌더 트리로 결합`된다.
+
+4. **렌더 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)를 계산**하고 **브라우저 화면에 HTML 요소를 페인팅**한다.
+
+### 📌 38-1. 요청과 응답
+
+> **브라우저의 핵심 기능**은 `필요한 리소스를 서버에 요청`하고 `서버로부터 응답`받아 `브라우저에 시각적으로 렌더링`하는 것이다.
+
+즉, **렌더링에 필요한 리소스는 모두 서버에 존재**하므로 필요한 리소스를 **서버에 요청하고 서버가 응답한 리소스를 파싱하여 렌더링**하는 것이다.
+
+서버에 요청을 전송하기 위해 브라우저는 주소창을 제공한다.
+
+▼ URI 의 형태 (= 인터넷의 자원을 나타내는 유일한 형태)
+
+![](https://velog.velcdn.com/images/ninto_2/post/aba5944a-5d68-49ed-9ebf-cc1021b4340f/image.png)
+
+🔎 **브라우저 주소창에 URL을 입력하면 생기는 일**
+
+1. 브라우저의 주소창에 URL 입력하고 Enter키를 누른다.
+2. URL의 호스트 이름이 DNS를 통해 IP 주소로 변환된다.
+3. 이 IP주소를 갖는 서버에게 요청을 전송한다.
+
+▼ 이 과정을 조금 더 상세히 살펴보자면 아래 그림과 같다.
+
+![](https://velog.velcdn.com/images/ninto_2/post/c5e9a885-12c9-48ce-8bc0-0155a6f6bda0/image.png)
+
+1. 사용자가 웹 브라우저의 검색창에 특정 사이트의 주소를 입력
+2. 웹 브라우저가 DNS에게 특정 사이트의 (도메인)주소를 요청
+3. DNS가 웹 브라우저에게 사이트의 IP주소를 응답
+4. 웹 브라우저가 웹 서버에게 IP 주소를 이용하여 HTML 문서를 요청
+5. 웹 서버는 바로 웹 페이지를 공급하지 못하고, 웹 애플리케이션 서버와 데이터 베이스에서 웹 페이지 작업을 처리
+6. 작업 처리 결과를 웹 서버로 보냄
+7. 웹 서버는 웹 브라우저에게 HTML 문서 결과를 응답
+8. 웹 브라우저는 화면에 웹 페이지를 출력
+
+만약 브라우저 렌더링 엔진이 HTML을 파싱하는 동안 도중에 외부 리소스를 로드하는 태그를 만나면 HTML파싱을 일시 중단하고 해당 리소스 파일을 서버로 요청한다.
+
+---
+
+### 📌 38-2. HTTP 1.1과 HTTP 2.0
+
+> `HTTP`는 웹에서 `브라우저와 서버가 통신하기 위한 프로토콜(규약)`이다.
+
+🔎 HTTP 1.1과 HTTP 2.0의 차이
+
+- `HTTP/1.1` : 커넥션당 하나의 요청과 응답만 처리한다. (여러개의 요청을 한번에 전송할 수 없고 응답 또한 마찬가지)
+
+  - 동시 전송이 불가능한 구조를 가짐
+  - 요청할 리소스의 개수에 비례하여 응답 시간도 증가하는 단점을 가짐
+
+- `HTTP/2.0` : 커넥션당 여러개의 요청과 응답이 가능하다.
+  - 다중 요청과 응답이 가능
+  - 여러 리소스의 동시 전송이 가능하므로 페이지 로드 속도가 약 50% 빠름
+
+---
+
+### 📌 38-3. HTML 파싱과 DOM 생성
+
+브라우저의 요청에 의해 서버가 응답한 HTML 문서는 문자열로 이루어진 순수한 텍스트이다.
+
+이 HTML 문서를 브라우저에 시각적인 픽셀로 렌더링하기 위해선, 브라우저가 이해할 수 있는 자료구조(객체)로 변환하여 메모리에 저장해야한다.
+
+**브라우저 엔진**은 아래와 같은 과정을 통해 **서버로 부터 응답받은 HTML 문서를 파싱**한다.
+
+그리고, **브라우저가 이해할 수 있는 자료구조인 DOM(Document Object Model)을 생성**한다.
+
+> 즉, `DOM은 HTML 문서를 파싱한 결과물`이다.
+
+▼ **브라우저 엔진의 HTML 파싱과 DOM 생성 과정**
+
+![](https://velog.velcdn.com/images/ninto_2/post/3c56e361-f321-48b5-ae46-8455b94b3ba5/image.png)
+
+---