defer의 특징
HTML을 파싱하다가 main.js를 다운받으라는 명령만 실행시킨 후 계속파싱함
파싱 종료 후 다운로드받은 main.js를 실행함
<!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>ansyc와 defer의 차이(defer의 장점)
ansyc : 여러개의 js파일이 있으면 먼저 다운로드 완료된 파일부터 실행됨
<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>defer : 코드 순으로 실행
<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>
Advanced thinking should be put into advanced code.