<disable_script>와 async, defer에 대해 알아보자

우선 script는 무슨 기능인가?

script는 자바스크립트를 읽게 해주는 기본 기능으로 html에서 script를 만날시 파싱을 중단 하고 우선적으로 자바스크립트를 읽는다. 이러한 이유 때문에 기본적으로 script는 body 바로 앞에 오게 하는 것이 일반적이다.

script async는 무슨 기능인가?

async를 사용하면 html을 읽는동안 병렬적으로 같이 스크립트를 다운 받게 된다. 그리고 스크립트를 다운로드 받은 즉시 스크립트를 실행한다.
스크립트를 실행하는 도중에는 html파싱을 중단후 다시 파싱을 진행한다.

<script src="3초.js" async>
<script src="1초.js" async>
<script src="2초.js" async>

해당 스크립트 3개를 만나게되면 병렬적으로 각각의 js를 읽게 되는데 먼저 다 읽은 순서대로 자바스크립트를 실행하게 된다. 위의 경우 1초.js => 2초.js => 3초.js 순서대로 스크립트를 실행하게 된다.
위 시간 순서도를 보면 스크립트를 다 읽은 즉시 실행하기 때문에 html에서 미처 파싱하지 못한 부분의 Dom을 참조하는 코드가 있다면 오류가 날 가능성이 있다. 그러므로 async를 사용하는 경우는 해당 스크립트가 Dom에 의존성이 없는 스크립트를 작성한 경우에만 쓰기 용이하다.

script defer는 무슨 기능인가?

<script src="3초.js" async>
<script src="1초.js" async>
<script src="2초.js" async>

스크립트와 html을 동시에 작업하는 부분은 async과 공통점이 있지만 가장 큰 차이점은 자바스크립트를 모두 다운 받아도 html파싱이 모두 완료되기 전까지 스크립트를 실행하지 않는다는 것이다. 이러한 특성때문에 위
세개의 스크립트는 3초.js => 1초.js => 2초.js순서로 실행을 하게된다.
보통 script만 사용을 한다면 body가 끝나는 부분의 직전에 붙여야 하지만 defer를 사용한다면 head부분에 써도 정상적으로 작동이 된다.