YouTube 드림코딩 by 엘리 채널의 영상을 참고하였습니다.
1. async, defer 없이 실행할 때
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>브라우저가 한줄 한줄 분석 후 CSS와 병합하여 DOM 요소로 변환한다. HTML 분석 중 script 태그를 마주하였을 때 main.js 다운로드가 시작된다. main.js 다운로드가 완료되고 나서 다시 분석하는 작업으로 넘어가게 된다.
단점 : script 파일 용량이 크거나 네트워크 환경이 쾌적하지 않은 경우에는 사용자가 웹사이트를 보기까지 많은 시간이 소요된다. 따라서 script 파일을 head 태그 안에 포함하지 않는 방향으로 가야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>다음은 script 태그를 body 태그 마지막 부분에 추가하는 방법이다.
HTML 분석 후 페이지가 준비된 다음에 main.js 다운로드가 시작된다.
장점 : 기본적인 HTML 컨텐츠를 빨리 볼 수 있다.
단점 : script 파일 비중이 클 때 정상적인 사이트를 보기까지 시간이 걸린다.
2. async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script asyn src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>다음은 head 태그 안 script 태그를 이용하되 async 속성값을 사용하는 방법이다. async는 boolean 타입의 속성값으로 선언만으로도 true로 설정이 된다. HTML 분석 중 script내 asyn를 마주하게 되면 main.js를 병렬로 다운로드하게 된다. 동시에 분석하다가 main.js 다운로드가 끝나면 분석하는 것을 멈추고 다운로드된 main.js 파일을 실행한다. 실행 후에 나머지 HTML 분석이 재개된다.
장점 : HTML 분석과 script 파일 다운로드가 동시에 일어나기 때문에 시간 절약이 가능하다.
단점 : HTML 전체 분석이 끝나기도 전에 script 파일이 실행되기 때문에 querySelector을 이용한 DOM요소 조작이 필요한 경우 조작이 필요한 시점에 원하는 요소가 아직 정의되지 않을 수 있다. 또한 HTML 분석 중 언제든지 script를 실행하기 위해서 멈출 수 있기 때문에 사용자가 페이지를 보는데 여전히 오래 걸릴 수 있다.
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
</head>위와 같이 여러가지 script 파일을 마주하게 될 경우에는 동일하게 병렬로 다운로드한다. 하지만 다운로드가 먼저 끝난 script 파일부터 실행을 하게 되고, 실행 순서에 의존적인 script 파일인 경우 문제가 생길 수 있다.
3. defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>마지막으로 defer 속성값을 사용하는 방법이다. HTML 분석 중 script내 defer를 마주하게 되면 main.js 다운로드가 진행되고 실행이 되지는 않는다. HTML 분석이 모두 끝난 후에 다운로드 된 main.js가 실행된다.
장점 : 가장 추천하는 방법이다.
단점 : X
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
</head>async도 마찬가지로 여러가지 script 파일을 마주하게 될 경우에는 분석과 동시에 script 파일 다운로드가 시작되고, 분석이 다 끝난 후에 다운로드가 모두 끝난 a.js b.js c.js가 순서대로 실행된다.
여러모로 살펴보았을 때 head 태그 안에 defer 속성값을 사용하는 것이 가장 효율적이고 안전하다.
