38-2장 브라우저의 렌더링 과정 - 최주용

docs/38_브라우저의 렌더링 과정/최주용.md

@@ -1,9 +1,17 @@
 # 📌 38장 브라우저의 렌더링 과정
 
-**TIL 기록일** : 2024.01.10
+**TIL 기록일** : 2024.01.10 (38.1 ~ 38.3) / 01.11 (38.4 ~ 38.6)
 
 ## 목차
 
+[1. 서론](#-서론)
+[2. 요청과 응답](#-381-요청과-응답)
+[3. HTTP 1.1과 HTTP 2.0](#-382-http-11과-http-20)
+[4. HTML 파싱과 DOM 생성](#-383-html-파싱과-dom-생성)
+[5. CSS 파싱과 CSSOM 생성](#-384-css-파싱과-cssom-생성)
+[6. 렌더 트리 생성](#-385-렌더-트리-생성)
+[7. 자바스크립트 파싱과 실행](#-386-자바스크립트-파싱과-실행)
+
 ## 👉 서론
 
 자바스크립트 런타임 환경인 Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서버 사이드 애플리케이션 개발에서도 사용할 수 있는 범용 개발 언어가 되었다.
@@ -80,3 +88,29 @@ HTTP 2.0은 커넥션당 여러 개의 요청과 응답, 즉 다중 요청/응
 5. HTML 문서는 HTML 요소들의 집합으로 이루어지며 HTML 요소는 중첩 관계를 갖는다. 중첩 관계에 의해 부자 관계가 형성된다. 이러한 부자 관계를 반영하여 모든 노드들을 트리 자료구조로 구성한다. 이 노드들로 구성된 트리 자료구조를 DOM이라 부른다.
 
 즉, `DOM`은 **HTML 문서를 파싱한 결과물이다.**
+
+## 👉 38.4 CSS 파싱과 CSSOM 생성
+
+렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 나간다. 이 과정 중 CSS를 로드하는 `link` 태그나 `style` 태그를 만나면 DOM 생성을 일시 중단한다.
+
+그리고 link 태그의 `href` 어트리뷰트나 지정된 CSS 파일을 서버에 요청하여 HTML과 동일한 파싱 과정(바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM)을 거치며 해석하여 `CSSOM`을 생성한다. 이후 CSS 파싱을 완료하면 DOM 생성을 재개한다.
+
+## 👉 38.5 렌더 트리 생성
+
+렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 각각 DOM과 CSSOM을 생성한다. 그리고 DOM, CSSOM 렌더링을 위해 **렌더 트리**<sup>render tree</sup> 로 결합된다.
+
+렌더 트리는 "렌더링을 위한" 트리 구조의 자료구조다. 따라서 브라우저 화면에 렌더링되지 않는 노드(예: meta 태그, script 태그 등)와 CSS에 의해 비표시(예: display: none;)되는 노드들은 포함하지 않는다. 다시 말해, 렌더 트리는 브라우저 화면에 렌더링되는 노드만으로 구성된다.
+
+이후 완성된 렌더 트리는 각 HTML 요소의 레이아웃(위치와 크기)을 계산하는 데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페인팅<sup>painting</sup> 처리에 입력된다.
+
+## 👉 38.6 자바스크립트 파싱과 실행
+
+HTML 문서를 파싱한 결과물로서 생성된 `DOM`은 HTML 문서의 구조, 정보뿐만 아니라 HTML 요소와 스타일 등을 변경할 수 있는 프로그래밍 인터페이스로서 DOM API를 제공한다. 즉 DOM API를 이용하면 자바스크립트로 동적으로 DOM을 조작할 수 있다. 이는 39장 "DOM"에서 자세히 살펴본다.
+
+CSS 파싱과 마찬가지로 렌더링 엔진은 DOM 생성 과정 중 자바스크립트 파일을 로드하는 `script` 태그나 자바스크립트 코드를 콘텐츠로 담은 `script` 태그를 만나면 DOM 생성을 일시 중단한다. 그 후 script의 `src` 어트리뷰트에 정의된 JS 파일을 서버에 요청하여 script 내의 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다. 이후 자바스크립트 파싱과 실행이 종료되면 다시 제어권을 넘겨 받고 DOM 생성을 재개한다.
+
+자바스크립트 파싱과 실행은 브라우저의 렌더링 엔진이 아닌 자바스크립트 엔진이 처리한다. 렌더링 엔진이 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하듯 자바스크립트 엔진은 자바스크립트를 해석하여 `AST`(추상적 구문 트리)를 생성한다. 그리고 이를 기반으로 인터프리터가 실행할 수 있는 중간 코드인 바이트코드를 생성하여 실행한다.
+
+상세 과정은 다음과 같다.
+
+![](https://velog.velcdn.com/images/wuzoo/post/02b85ba2-7871-47ab-aa24-0e0d1462e3f8/image.png)