docs: 브라우저의 렌더링 과정 (38.7 ~ 38.9)

docs/38_브라우저의 렌더링 과정/문소희.md

@@ -103,6 +103,56 @@ AST는 토큰에 문법적 의미와 구조를 반영한 트리 구조의 자료
 
 V8 엔진의 경우 자주 사용되는 코드는 터보팬<sup>TurboFan</sup>이라 불리는 컴파일러에 의해 최적화된 머신 코드<sup>optimized machine code</sup>로 컴파일되어 성능을 최적화하며, 코드의 사용 빈도가 적어지면 다시 디옵티마이징<sup>deoptimizing</sup>하기도 한다.
 
+## 🔎 7. 리플로우와 리페인트
+
+> 자바스크립트 코드에 DOM/CSSOM을 변경하는 DOM API가 사용된 경우 DOM/CSSOM이 변경된다. 이때 변경된 것들은 다시 렌더 트리에 결합되고 변경된 렌더 트리를 기반으로 레이아웃과 페인트 과정을 거쳐 브라우저의 화면에 다시 렌더링하는데, 이를 리플로우<sup>reflow</sup>, 리페인트<sup>repaint</sup>라 한다.
+
+- 리플로우: 레이아웃 게산을 다시 하는 것으로, 레이아웃에 영향을 주는 변경이 발생한 경우에 한하여 실행된다.
+- 리페인트: 재결합된 렌더 트리를 기반으로 다시 페인트를 하는 것을 말한다.
+
+**리플로우와 리페인트가 반드시 순차적으로 동시에 실행되는 것은 아니며,** 레이아웃에 영향이 없는 변경은 리페인트만 실행된다. 👀
+
+![](https://velog.velcdn.com/images/okorion/post/ce50f455-906a-45a7-b9f9-1f9c5a59a68c/image.png)
+
+## 🔎 8. 자바스크립트 파싱에 의한 HTML 파싱 중단
+
+> 브라우저는 동기적<sup>synchronous</sup>으로, 위에서 아래 방향으로 순차적으로 HTML, CSS, 자바스크립트를 파싱하고 실행한다. 이것은 script 태그의 위치에 따라 HTML 파싱이 블로킹되어 DOM 생성이 지연될 수 있다는 것을 의미하므로 _script 태그의 위치는 중요한 의미를 가진다._
+
+![](https://velog.velcdn.com/images/deli-ght/post/981f92af-48ba-4a0e-b6c4-ad730664db9d/image.png)
+
+`body` 요소의 가장 아래에 자바스크립트를 위치시키면 아래와 같은 이유들로 좋은 아이디어가 될 수 있다. ✨
+
+- DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작<sup>DOM API</sup>하면 에러가 발생할 수 있다.
+- 자바스크립트 로딩/파싱/실행으로 인해 HTML 요소들의 렌더링에 지장받는 일이 발생하지 않아 페이지 로딩 시간이 단축된다. 즉, 자바스크립트 실행 전 DOM 생성이 완료되어 렌더링되므로 페이지 로딩 시간이 단축된다.
+
+## 🔎 9. script 태그의 async/defer 어트리뷰트
+
+> 자바스크립트 파싱에 의한 DOM 생성이 중단<sup>blocking</sup>되는 문제를 근본적으로 해결하기 위해 HTML5부터 script 태그에 async/defer 어트리뷰트가 추가되었다.
+
+단, async/defer는 src 어트리뷰트가 없는 인라인 자바스크립트에는 사용 불가능하다.
+
+```html
+<!-- 두 어트리뷰트 모두, HTML 파싱과 외부 자바스크립트 파일의 로드가 비동기적으로 동시에 진행됨 -->
+<script async src="extern.js"></script>
+<script defer src="extern.js"></script>
+```
+
+#### ✨ async 어트리뷰트
+
+> 자바스크립트 파싱과 실행은 자바스크립트 파일의 로드가 완료된 직후 진행되며, 이때 HTML 파싱이 중단된다.
+
+여러 개에 지정 시 script 태그의 순서와는 상관없이 로드가 완료된 자바스크립트부터 먼저 실행되므로, 순서가 보장되지 않기 때문에 _순서 보장이 필요한 script 태그에는 지정하지 않아야 한다._
+
+![](https://velog.velcdn.com/images/deli-ght/post/4a6415c1-8237-49e9-94dc-c2f9d1d347a3/image.png)
+
+#### ✨ defer 어트리뷰트
+
+> 자바스크립트 파싱과 실행은 HTML 파싱과 외부 자바스크립트 파일의 로드가 완료된 직후, 즉 DOM 생성이 완료된 직후<sup>이때 DomContentLoaded 이벤트 발생</sup>에 진행된다.
+
+DOM 생성이 완료된 이후 실행되어야 할 자바스크립트에 유용하다.
+
+![](https://velog.velcdn.com/images/deli-ght/post/3c3ae746-29fb-4090-880c-efb5438d1bc5/image.png)
+
 ## 👀 REFERENCE
 
 모던 자바스크립트 Deep Dive 38장 브라우저의 렌더링 과정