docs: 38.4 ~ 38.6 정리

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

@@ -27,3 +27,40 @@
 ### 38.3 HTML 파싱과 DOM 생성
 
 - 브라우저 렌더링 엔진은 응답받은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다.
+
+### 38.4 CSS 파싱과 CSSOM 생성
+
+- 렌더링 엔진이 HTML을 처음부터 한 줄씩 순차적으로 파싱하여 DOM을 생성해 가다가
+  CSS를 로드하는 link 태그나 style 태그를 만나면 DOM 생성을 일시 중단한다.
+  -> CSS 파일을 서버에 요청하여 로드한 CSS 파일이나 style 태그 내의 CSS를 HTML과 동일한 \*파싱 과정을 거치며 해서하여 CSSOM을 생성한다.
+  (\*바이트 -> 문자 -> 토큰 -> 노드 -> CSSOM(CSS Object Model))
+  -> CSS 파싱을 완료하면 HTML 파싱이 중단된 지점부터 다시 HTML을 파싱하기 시작하여 DOM 생성을 재개한다.
+- CSSOM은 CSS의 상속을 반영하여 생성된다.
+
+### 38.5 렌더 트리 생성
+
+- 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성한다.
+  -> DOM과 CSSOM은 렌더링을 위해 **렌더 트리**로 결합된다.
+- 렌더 트리 : 렌더링을 위한 트리 구조의 자료구조
+  - 브라우저 화면에 렌더링되지 않는 노드(ex. meta, script 태그)와 CSS에 의해 비표시(ex. display: none)되는 노드들은 포함하지 않는다.
+    => 브라우저 화면에 렌더링되는 노드만으로 구성된다.
+  - 완성된 렌더 트리는 각 HTML 요소의 레이아웃을 계산하는 데 사용되며 브라우저 화면에 픽셀을 렌더링하는 페인팅 처리에 입력된다.
+- 레이아웃 계산과 페인팅이 재차 실행되는 경우
+  - 자바스크립트에 의한 노드 추가 또는 삭제
+  - 브라우저 창의 리사이징에 의한 뷰포트 크기 변경
+  - HTML 요소의 레이아웃에 변경을 발생시키는 스타일 변경
+  - ❗️ 리렌더링은 비용이 많이 드는(성능에 악영향을 주는)작업이다. => 가급적 리렌더링이 빈번하게 발생하지 않도록 주의해야 한다.
+
+### 38.6 자바스크립트 파싱과 실행
+
+- 자바스크립트 코드에서 DOM API를 사용하면 이미 생성된 DOM을 동적으로 조작할 수 있다.
+- CSS 파싱 과정과 마찬가지로 렌더링 엔진은 HTML을 한 줄씩 순차적으로 파싱하여 DOM을 생성하다가
+  자바스크립트 파일을 로드하는 script 태그나 자바스크립트 코드를 콘텐츠로 담은 script 태그를 만나면 DOM 생성을 일시 중단한다.
+  -> 자바스크립트 파일이나 script 태그 내의 자바스크립트 코드를 파싱하기 위해 자바스크립트 엔진에 제어권을 넘긴다.
+  -> 자바스크립트 파싱과 실행이 종료되면 렌더링 엔진으로 다시 제어권을 넘겨 HTML 파싱이 중단된 지점부터 다시 HTML 파싱을 시작하여 DOM 생성을 재개한다.
+- 자바스크립트 엔진
+  - 자바스크립트 파싱과 실행 처리
+  - 자바스크립트 코드를 파싱하여 CPU가 이해할 수 있는 저수준 언어로 변환하고 실행하는 역할
+  - 구글 크롬, Node.js의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore 등 다양한 종류가 있다.
+  - 모든 자바스크립트 엔진은 ECMAScript 사양을 준수한다.
+- HTML -> DOM, CSS -> CSSOM, **JavaScript -> AST(추상적 구문트리)**