script defer async tag

[HTML] script 태그의 async, defer 속성

Script 태그 DOM이 생성될 때, Script 태그를 만나면 DOM 생성을 멈추고 Script를 실행한다. src 속성을 포함한 외부 스크립트를 만났을 때에도 마찬가지이다. 해당 스크립트를 다운 받고 실행할 때 까지 Script 태그 아래에 선언된 DOM 요소들은 대기해야 한다. 여기서 DOM 생성을 중단하지 않고, 스크립트를 동시에 내려받게 할 수 있는 방법으로 defer, async가 있다. DOM 생성 중단이 일어난다면 어떤 문제가 발생하는가. 위에서 언급한 대로, 스크립트 태그 아래에 있는 DOM 요소는 대기하므로, 해당 DOM 요소들에 접근할 수 없다. querySelector와 같이 DOM을 직접적으로 조작하여 핸들러등을 추가하는 등의 행위가 불가능하다. 스크립트의 용량이 크다면, 페이지..