Script async와 defer 차이점
head
<!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 src = "main.js"></script>
</head>
<body>
</body>
</html>head안에 script를 포함시키면 사용자가 HTML파일을 다운받았을때 브라우저가 한줄한줄 parsing HTML(읽기)하여 CSS와 병합하여 DOM요소로 변환하게 되는데 읽어내려가다가 script태그가 있으면 parsing을 멈추고 script를 다운하게 된다. 다운이 끝나면 다시 parsing을 시작한다.
단점: 인터넷이 느리거나 spript가 용량이 크면 사용자가 웹페이지를 불러오는데 시간이 오래 걸린다.
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 = "main.js"></script>
</body>
</html>따라서 script태그를 body부분에 입력하게 되면 parsing을 끝내고 script를 다운받게 되어 시간이 덜 걸리게 된다. 하지만 웹페이지가 JavaScript에 의존적이라면 fetching js와 executing js를 하는 시간까지 기다려야 한다는 단점이 있다.
head + 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 asyn src = "main.js"></script>
</head>
<body>
</body>
</html>head안에 script를 이용하되 async라는 속성값을 쓰는 방법이다. async는 boolean타입의 속성값으로 선언하는 것만으로도 true이다. 브라우저가 parsing을 하다가 async를 발견하면 병렬로 'main.js'를 다운을 받게 명령하고 parsing을 하게 된다. 다운이 완료 되면 parsing을 멈추고 실행하게 된다. 실행을 다하고 나서 나머지 parsing을 하게 된다.
장점: haed부분에 async를 두어 병렬적으로 실행되어 시간을 단축할 수 있다.
단점: js파일이 html이 parsing되기 전에 실행될 수도 있고, js파일을 실행하기 위해 parsing을 멈출 수가 있어 사용자 페이지를 보는데 시간이 걸릴 수 있다.
head + 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 = "main.js"></script>
</head>
<body>
</body>
</html>head안에 script를 넣고 defer이라는 속성값을 사용하게 되면 parsing을 하다가 defer를 발견하면 js파일을 다운(fetching)받자고 명령만 하고 나머지 parsing을 하게 된다. 그리고 마지막에 parsing이 끝난 다음에 다운로드 되어진 js파일을 실행(excuting)하게 된다.
장점: 시간이 가장 적게 걸린다.
<!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 asyn src = "a.js"></script>
<script asyn src = "b.js"></script>
<script asyn src = "c.js"></script>
</head>
<body>
</body>
</html>위 코드처럼 async가 여러개고 js파일의 크기가 다른데 순서가 있는 js파일들이라면 문제가 생긴다.
<!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 = "a.js"></script>
<script defer src = "b.js"></script>
<script defer src = "c.js"></script>
</head>
<body>
</body>
</html>위 코드처럼 defer인 경우 필요한 js를 다 다운받은 다음 순서대로 실행이 되므로 우리가 원하는대로 script가 보여진다.
