자바스크립트를 HTML로 연동하기 위해서는 <body>태그의 맨 끝 부분에 <script>태그를 넣어야 한다.
왜 그럴까?
이유는 브라우저가 <script>태그를 만나는 순간 코드를 해석(parsing)하는 과정을 중단하고 자바스크립트 코드를 해석해서 실행하기 때문이다.
그렇다면, 모든 HTML 문서는 위와같은 과정으로만 해석되고 실행되는 것일까?
답은 아니다.
오늘 알아볼 Async와 Defer 스크립트를 이용하면, HTML의 해석방식에 약간의 변형을 가할 수 있다.
<script async>
With async, the file gets downloaded asynchronously and then executed as soon as it’s downloaded.
async 옵션은 DOM트리 생성을 자바스크립트를 만나자마자 중단을 하지 않고,
다운로드가 끝나고 실행이 될 때 중단을 한다. 이름에서 유추할 수 있듯이 비동기적으로 실행을 하기 때문에
실행 순서를 보장할 수 없다.
<script defer>
With defer, the file gets downloaded asynchronously, but executed only when the document parsing is completed.
defer는 자바스크립트를 만나고 다운로드가 완료가 되어도 바로 실행을 하지 않고,
파싱이 다 끝나고 스크립트 실행이 된다. 따라서 실행순서가 호출순서와 같기 때문에 스크립트가 다른 스크립트에 의존하고 있을 때 사용하면 좋은 옵션이다.
'Javascript' 카테고리의 다른 글
| JS Array.prototype.sort() (0) | 2021.11.05 |
|---|---|
| JS Import (0) | 2021.11.01 |
| JS Regular Expressions (0) | 2021.10.26 |
| JS 심화개념 - MapReduce, Currying, Function composition, Declarative Programming (0) | 2021.10.25 |
| JS Shallow Copy (0) | 2021.10.25 |
