HTML Rendering




1. HTML을 읽기 시작한다.
2. HTML을 파싱한다.
3. DOM 트리를 생성한다.
4. Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성되고
5. Display에 표시한다

![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F8115c3d5-3754-429b-8516-a6fa17636b58%2FUntitled.png?table=block&id=567ded6b-5164-4e8d-b27f-7e3d60e5e55e&cache=v2)

이로인해 HTML태그들 사이에 script 태그가 위치하면 두가지 문제가 발생합니다.
6. HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
7. DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.

> [태그는 어디에 위치해야 할까요?](https://velog.io/@takeknowledge/script-%ED%83%9C%EA%B7%B8%EB%8A%94-%EC%96%B4%EB%94%94%EC%97%90-%EC%9C%84%EC%B9%98%ED%95%B4%EC%95%BC-%ED%95%A0%EA%B9%8C%EC%9A%94)






`DOMContentLoaded` 내부의 코드는 **DOM 생성이 끝난 후**에 실행되고`onload` 내부의 코드는 **문서에 포함된 모든 콘텐츠(images, script, css, ...)가 전부 로드된 후**에 실행됩니다.
일반 script 코드 -> DOMContentLoaded 안의 코드 -> window.onload 안의 코드 순으로 출력