async defer - amorfati0310/javascript-vm GitHub Wiki

javascript코드를 src로 지정하고 있는 script 태그의 위치는 보통 body 태그가 닫히기 전에 위치시킨다. 그래야 DOM파싱을 방해하지 않는다. 하지만 script태그에는 async 와 defer라는 속성이 있다. 이를 이용하면 DOM 로딩을 방해하지 않고, javascript 를 다운로드 받고 실행할 수 있다.

이완 관련된 아래 글을 학습한다. http://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

이글에 나온것처럼, script와 dom 다운로드와 파싱의 순서와 병렬처리방법을, async와 defer 속성을 통해서 선택적으로 사용할 수 있다. 이를 잘 활용해서 script태그를 HTML안에 위치시킬 수 있다.

asyncAnddefer

async

async는 동시에 html파싱과 동시에 다운로드를 하다가 script가 실행될 때는 html파싱이 잠시 멈춥니다. async downloads the file during HTML parsing and will pause the HTML parser to execute it when it has finished downloading.

defer

defer는 다운로드는 역시 동시에 진행되고 실행 자체를 html파싱이 다 끝난다음 진행합니다

defer downloads the file during HTML parsing and will only execute it after the parser has completed. defer scripts are also guaranteed to execute in the order that they appear in the document.