Seonglae Cho- HTML을 읽기 시작한다.
- HTML을 파싱한다.
- DOM 트리를 생성한다.
- Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성되고
- Display에 표시한다
이로인해 HTML태그들 사이에 script 태그가 위치하면 두가지 문제가 발생합니다.
- HTML을 읽는 과정에 스크립트를 만나면 중단 시점이 생기고 그만큼 Display에 표시되는 것이 지연된다.
- DOM 트리가 생성되기전에 자바스크립트가 생성되지도 않은 DOM의 조작을 시도할 수 있다.
태그는 어디에 위치해야 할까요?
태그는 어디에 위치하는 게 가장 좋을까요? 일단은 body 태그 최하단에 위치하는 게 가장 좋습니다. 이를 이해하기 위해선 브라우저의 동작 방식을 이해할 필요가 있습니다. 🔍 브라우저의 동작 방식 HTML을 읽기 시작한다. HTML을 파싱한다. DOM 트리를 생성한다. Render 트리(DOM tree + CSS의 CSSOM 트리 결합)가 생성되...
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 안의 코드 순으로 출력