이 세가지의 태그를 통해 브라우저에게 언제 자바스크립트 코드를 실행할지 알려줄 수 있다.
<script src="myscript.js"></script>
<script async src="myscript.js"></script>
<script defer src="myscript.js"></script>script
- script태그를 만나자마자 html parsing이 중단되고 즉시 script태그를 실행함 (실행이 끝난 후에 다시 html parsing이 시작).
- script태그는 body closing태그 전에 위치 시키는게 일반적임 (header에 위치시키면 script parsing이 완료될 때까지 유저는 빈화면을 봐야하기 때문)
Issues
- script는 아래에 있는 DOM contents를 볼 수 없음(handler를 추가 하지 못함).
- 유저는 script 로딩이 끝날 때까지 page content를 볼 수 없음 (blocks the page)
async
- script를 html parsing과 병렬적으로 가져옴
- script가 실행가능할 때 즉시 실행하고(html parsing 중단) html parsing을 다시함
- 순서를 기억하지 않음
- 각각의 스크립트가 서로 의존적이지 않을 때 유용함 (Google analytics)
Defer
- script를 html parsing과 병렬적으로 가져옴
- html parsing이 끝나고 script를 실행함
- 순서를 기억함
- 각각의 스크립트가 서로 의존적일 때 유용함 (jquery처럼 두번째 스크립트가 첫번째 스크립트에 의존할 경우)
- script를 header 혹은 body 어느곳에 위치시켜도 상관 없음(html parsing이 끝나고 script를 실행하기 때문)
Hello World.