Merge pull request #1200 from nincoding/nincoding

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

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

@@ -97,3 +97,87 @@ Node.js의 등장으로 자바스크립트는 웹 브라우저를 벗어나 서
 ![](https://velog.velcdn.com/images/ninto_2/post/3c56e361-f321-48b5-ae46-8455b94b3ba5/image.png)
 
 ---
+
+### 📌 38-4. CSS 파싱과 CSSOM 생성
+
+렌더링 엔진은 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해나간다.
+
+그 과정에서 CSS를 로드하는 link태그나 style태그를 만나면 DOM생성을 일시 중단하고, 지정된 CSS파일을 서버에 요청하여 HTML과 동일한 파싱 과정을 거치며 해석하여 CSSOM을 생성한다.
+
+> 바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM 생성
+
+이후 CSS파싱이 완료되면 HTML 파싱이 중단된 지점부터 다시 HTML파싱을 하기 시작하여 DOM 생성을 재개한다.
+
+`CSSOM`은 `CSS의 상속을 반영하여 생성`된다.
+
+DOM과 마찬가지의 형태로, 모든 요소의 스타일 요소가 트리 형태로 상속 관계가 반영되어 생성된다.
+
+---
+
+### 📌 38-5. 렌더 트리 생성
+
+렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 각각 DOM과 CSSOM을 생성한다.
+
+> **DOM과 CSSOM은 렌더링을 위해 렌더 트리로 결합된다.**
+
+- 렌더트리 : 렌더링을 위한 트리 구조의 자료구조
+
+렌더트리는 브라우저 화면에 렌더링되지 않는 노드(ex. meta, script 태그 등)와 CSS에 의해 비표시(ex. display: none)되는 노드들은 포함하지 않는다.
+
+즉, **렌더트리는 브라우저 화면에 렌더링되는 노드만으로 구성**된다.
+
+> 완성된 렌더 트리는 각 HTML요소의 레이아웃(위치와 크기)을 계산하는데 사용되며, 브라우저 화면 픽셀을 렌더링하는 페인팅 처리에 입력된다.
+
+▼ **주요 렌더링 경로** (Critical Rendering Path = CRP) 과정
+
+HTML, CSS, JS 등 작성한 내용을 브라우저 화면의 픽셀로 나타내는 렌더링 과정인 CRP를 살펴보면 아래와 같다.
+
+![](https://velog.velcdn.com/images/ninto_2/post/ab67933c-4d73-49c7-8477-617e09786e6b/image.png)
+
+이 브라우저 렌더링 과정은 반복해서 실행될 수 있다.
+
+다시말해, **레이아웃 계산과 페인팅을 다시 실행하는 리렌더링**은 **비용이 많이 드는 성능에 악영향을 주는 작업**이다.
+
+따라서 **가급적 리렌더링이 빈번하게 발생하지 않도록 주의할 필요**가 있다.
+
+---
+
+### 📌 38-6. 자바스크립트 파싱과 실행
+
+`DOM`은 `HTML 문서를 파싱한 결과물`로서 생성된다.
+
+이 DOM은 **HTML 문서의 구조와 정보**뿐만 아니라 **HTML 요소와 스타일 등을 변경**할 수 있는 **프로그래밍 인터페이스로서 DOM API를 제공**한다.
+
+> **자바스크립트 코드에서 DOM API를 사용하면 이미 생성된 DOM을 동적으로 조작**할 수 있게 된다.
+
+`자바스크립트 파싱과 실행`은 브라우저의 렌더링 엔진이 아닌 `자바스크립트 엔진이 처리`한다.
+
+🔎 **자바스크립트 엔진의 특징**
+
+- `자바스크립트 코드를 파싱`하여 `CPU가 이해할 수 있는 저수준 언어로 변환`하고 `실행`한다.
+- 구글 크롬과 Node.js의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore 등 다양한 종류가 있다.
+- 모든 자바스크립트 엔진은 `ECMAScript 사양을 준수`한다.
+
+🔎 **자바스크립트 파싱과 실행 과정**
+
+![](https://velog.velcdn.com/images/ninto_2/post/e685a02e-8a4a-4491-ad1a-882d3a8ee97e/image.png)
+
+> 자바스크립트 엔진이 `코드를 파싱하기 시작`하면, `자바스크립트를 해석`하여 `AST(추상적 구문 트리)를 생성`한다.
+
+- `AST` (추상적 구문 트리) : **토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료구조**
+  - AST는 인터프리터나 컴파일러만이 사용하는 것이 아님
+  - AST를 사용하면 TypeScripte, Babel, Prettier 같은 트랜스파일러를 구현할 수 있다.
+
+이 `AST를 기반`으로 `인터프리터가 실행 할 수 있는 중간 코드인 바이트코드를 생성`하여 `실행`한다.
+
+- `토크나이징` (tokenizing) : 단순한 문자열인 **자바스크립트 소스코드를 어휘분석**하여 **문법적 의미를 갖는 코드의 최소 단위인 토큰들로 분해**한다. (= 이 과정을 렉싱이라고 부르기도 하지만 토크나이징과 미묘한 차이가 있음)
+
+- `파싱` (parsing) : 토큰들의 집합을 구문분석하여 AST(추상적 구문 트리)를 생성한다.
+
+- 바이트코드 생성과 실행 : 파싱의 결과물로서 생성된 AST는 **인터프리터가 실행할 수 있는 중간 코드인 바이트코드로 변환**되고 **인터프리터에 의해 실행**된다.
+
+V8엔진의 경우 자주 사용되는 코드는 터보팬이라 불리는 컴파일러에 의해 최적화된 머신코드로 컴파일되어 성능을 최적화한다.
+
+만약 코드의 사용 빈도가 적어지면 다시 디옵티마이징하기도 한다.
+
+---