1. head + async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="main.js"></script>
</head>
<body>
</body>
</html>
js에서 DOM요소 조작할 수 없을 수 있음
<!DOCTYPE html>
<html lang="en">
<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>
<body>
</body>
</html>
js가 순서에 의존적이라면(a.js가 실행 된 후 b.js가 실행되어야 하는 경우) 문제가 될 수 있다.
2. head + defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
출처: https://www.youtube.com/watch?v=tJieVCgGzhs&feature=youtu.be
