https://www.youtube.com/watch?v=tJieVCgGzhs (드림코딩 by 엘리)

html 에서 javaScript 를 포함할 때 어떻게 하는 것이 더 효율적인지 살펴보자.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="main.js"></script> 
</head>
<body>
    
</body>
</html>
head 안에 script가 포함 되어 있는 것을 확인 할 수 있다.

사용자가 html 을 다운 받았을 때 browser 가 한줄 한줄 씩 분석을 시작한다.
이를 CSS 와 병합해서 Dome 요소로 변환하게 된다. 분석 해 나가다가 script 를 만나게 되면,
main.js 를 다운 받아야 한다. 그럼 이 때 분석을 잠시 멈추고 서버에서 js 를 다운받게 된다.
그리고 실행까지 하는 것을 기다려야 한다. js 의 크기가 크고, 인터넷도 느리다면 사용자가
site 를 보는데까지 아주 오래 걸릴 것이다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="main.js"></script>
</body>
</html>

body 안에 script 가 있다.
page 의 분석이 다 끝나고 나서 script를 만나게 되는 것이다.
기본적인 html 을 사용자가 빠르게 받아 볼 수 있지만, site 가 js에 의존적이라면, 즉
사용자가 의미있는 컨텐츠를 보기 위해서는 js 를 이용해서 서버에 있는 데이터를 받아 온다던지,
Dome 요소를 이쁘게 꾸며주는 등의 경우라면 사용자가 정상적인 site를 볼 때까지는 시간이 걸린다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script async src="main.js"></script>
</head>
<body>
    
</body>
</html>

head 안에 포함되면서, async 라는 속성값을 사용했다.
boolean 타입의 속성값이기 때문에 선언하는 것만으로 true 로 사용 가능하다.
js 다운받는 작업을 병렬로 처리하게 해준다. 그렇지만 js를 실행시키는 과정에서 다시
parsing 과정이 block 된다. 만약 js 에서 어떠한 처리가 있었다면, html은 준비가 되지 않았기
때문에 원하는 요소가 준비되지 않았을 수 있다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="main.js"></script>
</head>
<body>
    
</body>
</html>

역시 head에 들어있으면서 이번엔 defer 속성값을 사용했다.
html 을 parsing 하는 동안 js 를 다운받고, parsing 이 종료되면, js 를 실행시킨다.

head + async

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script async src="a.js"></script>
    <script async src="b.js"></script>
    <script async src="c.js"></script>
</head>
<body>
    
</body>
</html>
async 는 정의된 순서에 상관없이 먼저 다운된 js를 실행 하게 된다. 그렇기 때문에
순서가 중요한 js 라면 이는 문제가 될 수 있다.

head + defer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="a.js"></script>
    <script defer src="b.js"></script>
    <script defer src="c.js"></script>
</head>
<body>
    
</body>
</html>

defer 는 정의된 순서대로 실행 하기 때문에 우리가 원하는대로 js를 실행 시킬 수 있다.