docs: 38.7 ~ 38.9 정리

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

@@ -64,3 +64,37 @@
   - 구글 크롬, Node.js의 V8, 파이어폭스의 SpiderMonkey, 사파리의 JavaScriptCore 등 다양한 종류가 있다.
   - 모든 자바스크립트 엔진은 ECMAScript 사양을 준수한다.
 - HTML -> DOM, CSS -> CSSOM, **JavaScript -> AST(추상적 구문트리)**
+
+### 38.7 리플로우와 리페인트
+
+- 리플로우 : 레이아웃 계산을 다시 하는 것
+- 리페인트 : 재결합된 렌더 트리를 기반으로 다시 페인트 하는 것
+- 레이아웃에 영향이 없는 변경은 리플로우 없이 리페인트만 실행된다.
+
+### 38.8 자바스크립트 파싱에 의한 HTML 파싱 중단
+
+- 브라우저는 동기적으로 HTML, CSS, 자바스크립트를 파싱하고 실행한다.
+  -> script 태그의 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있다
+  => script 태그의 위치는 중요한 의미를 갖는다.
+- DOM을 변경하는 DOM API를 사용할 때 DOM 생성이 완료되지 않은 상태라면 문제가 발생할 수 있다.
+  -> 이러한 문제를 회피하기 위해 body 요소의 가장 아래에 자바스크립트를 위치 시킬 수 있다.
+  => 자바스크립트 로딩/파싱/실행으로 인해 HTML 요소들의 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다.
+
+### 38.9 script 태그의 async/defer 어트리뷰트
+
+- 자바스크립트 파싱에 의한 DOM 생성 중단 문제를 근본적으로 해결하기 위해
+  HTML5부터 script 태그에 `async`와 `defer` 어트리뷰트가 추가되었다.
+- `async`와 `defer` 어트리뷰트는 src 어트리뷰트를 통해 외부 자바스크립트 파일을 로드하는 경우에만 사용할 수 있다. (인라인 자바스크립트에는 사용 불가)
+- `async`와 `defer` 어트리뷰트를 사용하면 HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다. 하지만 실행 시점에 차이가 있다.
+
+**`async` 어트리뷰트**
+
+- HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.
+
+<img width="300" alt="image" src="https://github.com/Next-by-Next/Javascript-Deep-Dive-Study/assets/78250089/3217ade6-9071-4bf6-b6f7-5f65eb201821">
+
+**`defer` 어트리뷰트**
+
+- HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행된다.
+
+<img width="300" alt="image" src="https://github.com/Next-by-Next/Javascript-Deep-Dive-Study/assets/78250089/3dc623d1-cd33-4222-a5b2-f894f3859c82">