HTML에서 JS를 다운로드 하는 방법은 일반적으로 HTML을 다운 받고, HTML에서 import한 JS를 다운받는다.
하지만 JS는 항상 같은 순서로 다운받아지지 않고, HTML 내에서 import한 위치 혹은 방식에 따라 다운로드 받는 순서가 다르다.
1. <script><script/> 태그를 <body> 태그의 맨 아래 두는 법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<script src="./index.js"></script>
</body>
</html>
위와 같은 코드로 작성했을 때, HTML 위쪽부터 읽어 내려오며 파싱되기 때문에, HTML 파일이 대용량일 경우 스크립트의 처리가 늦어진다.
그러면 HTML 파싱과 스크립트 다운로드를 병렬로 하면 되겠다고 생각한 방법이 두번째인 async이다.
2. async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script async src="./index.js"></script>
</head>
<body></body>
</html>
async를 사용하면 HTML을 파싱하는 동안 스크립트를 만나게 되면 파싱을 계속 진행하면서, 스크립트를 다운받게 된다. 스크립트 다운로드가 완료되면 해당 스크립트를 실행하고, 실행하는 동안 HTML 파싱은 멈춘 후, 스크립트 실행이 끝난 후 문서를 읽게 된다.
하지만 async는 순서가 보장이 되지 않는다는 단점이 있다.
그러한 순서를 보장해주는 것이 defer이다.
3. defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script defer src="./index.js"></script>
</head>
<body></body>
</html>
defer는 스크립트를 만났을 때, HTML 파싱을 멈추지 않고, 끝까지 수행한 후 </html> 을 만났을 때 실행된다. HTML 파싱을 모두 끝낸 후에 스크립트를 실행하기 때문에 DOM 요소를 사용하는 코드가 제대로 동작하지 않을 때의 문제가 해결된다. 또한 async와 달리 순서가 보장된다는 장점이 있다.
그러면 어떨 때 async와 defer를 사용해야할까?
defer는 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용하고,
async는 방문자 수를 세는 작업이나, 광고 관련 등의 독립적인 스크립트, 실행 순서가 중요하지 않은 경우에 적용한다.
📍참고
