[javascript] script 태그 위치

1. <script>를 head안에 둘 경우

• 브라우저가 parsing 하면서 페이지가 준비된다음 실행되기 때문에 페이지 컨텐츠를 보기까지 로딩이 오래 걸림

2. <script>를 body 안에 둘 경우

• javascript에 의존적인 페이지인 경우 페이지 로딩 시간이 오래 걸림

3. <script>를 asyn 로 선언

• 브라우저가 한줄씩 parsing하면서 script태그에 있는 js파일 다운로드가 실행되면서 동시에 html 문서도 실행시킴(병렬)

• 위험요소

• javascript에서 queryselect로 html 에 있는 태그를 선택하고자 할 때 html 이 아직 다운로드 되지 않은 경우 페이지에 이상이 나타날 수 있음

• javascript를 실행하기 위해 멈출 수 있어 페이지 로딩이 더 오래걸릴 수 있음

• 다운로드가 먼저 된 js 파일부터 실행됨(선언 순서와 다를 수 있음)

4. <script>를 defer로 선언

• asyn와 마찬가지로 브라우저가 parsing하면서 js파일을 동시에 다운로드 받음(병렬)

• js파일이 다운로드 되면 html이 모두 다운로드 된 후에 js파일을 한번 더 실행함

• 먼저 선언된 js 파일부터 실행됨