외부 자바스크립트 파일을 호출하는 위치

http://code.i-harness.com/ko/q/6a8bb

<script src="script.js"></script> 태그를 html 의 head 에 넣으면..

해당 .js 파일을 다운로드 하는 동안 웹브라우저가 DOM 구조 생성을 연기합니다. 이것이 기본.

옛날 웹브라우저나 최근 웹브라우저나 동일한 기능.

그래서, </body> 바로 이전 태그에 상기 script 태그를 넣는 경우가 있었으나..

이렇게 하면, 본문에 사용되는 스크립트가 실행되어야 할 때 외부 자바스크립트 파일이 다운로드 될 때까지 기다려야 함.

최신 웹브라우저들은 defer 와 async 옵션을 script 태그에 넣어서, head 에 추가 되었을 때..

DOM 구조 생성 과정과 외부 .js 파일 다운로드를 서로 비동기적으로 실행.

외부 .js 가 하나라면 두 옵션이 동일한 기능.

외부 .js 가 여러개라면 async 는 처음 .js 파일을 다운로드 하는 중에 그 다음 .js 파일에 대한 다운로드를 시작.

defer 의 경우에는, 첫번째 .js 를 모두 다운로드 한 다음에 두번째 .js 를 다운로드하기 시작.

head 쪽에 async 나 defer 옵션을 주어 외부 .js 파일을 다운로드 하게 하더라도,

이를 지원하지 않는 웹브라우저는 여전히 DOM 구조를 완성하지 않고 기다림..

방향성은..

head 에 외부 .js 파일을 async 나 defer 옵션으로 다운로드 하는 방식이 맞을 듯...