자바스크립트의 위치
1. head 안에 위치하는 경우
(1) 브라우저가 html 파일을 parsing 중에 javascript를 발견
(2) 브라우저는 html parsing을 잠시 멈추고 javascript 파일을 다운
(3) 브라우저가 서버에서 다운받은 javascript를 실행
(4) 브라우저가 html 나머지 부분을 다시 parse
▶javascript 파일의 크기가 크거나, 인터넷 환경이 좋지 않은 경우 웹사이트를 보게 되기까지 시간이 많이 걸릴 수 있음
2. body 안에 위치하는 경우
(1) 브라우저가 html 파일을 다운받고, parse하여 page is ready된 후에
(2) 브라우저가 서버에서 javascript를 가져옴
(3) 브라우저가 javascript를 실행
▶javascript 다운이 완료되기 전에도 페이지가 준비되어 사용자가 페이지를 빨리 볼 수 있다는 장점이 있지만, javascript의 역할이 큰 페이지의 경우 불편
3. head 안에 위치하되 async 속성을 사용하는 경우
<html>
<head>
<meta charset="UTF-8" />
<title> Document </title>
<script asyn src="main.js"></script> //head 안에 async 속성과 함께 사용
</head>
<body>
<div></div>
</body>
</html>(1) 브라우저가 html 파일을 parsing 중에
(2) async javascript를 동시에 다운받도록 명령
(3) javascript 다운이 완료되면 html parsing을 중단하고 javascript를 실행
(4) javascript 실행이 완료된 후 나머지 html 내용을 parse
▶javascript fetching이 html parsing과 동시에 일어나기 때문에 시간을 절약할 수 있겠다. 그러나 html parsing이 완료되기 전에 javascript가 실행되므로, 실행 시점에 필요한 html의 요소가 정의되지 않으면 작동에 문제가 있을 수 있다. 또한 javascript가 실행될 때 html parsing이 중단되므로 사용자가 페이지 내용을 모두 보기까지 시간이 더 걸릴 수 있다.
▶다수의 javascript가 있는 경우 순서대로 실행되는 것이 아니라 다운로드가 완료된 것부터 실행되기 때문에 실행 순서가 중요한 페이지인 경우 문제가 될 수 있음
4. head 안에 위치하되 defer 속성을 사용하는 경우
<html>
<head>
<meta charset="UTF-8" />
<title> Document </title>
<script defer src="main.js"></script> //head 안에 defer 속성과 함께 사용
</head>
<body>
<div></div>
</body>
</html>(1) 브라우저가 html 파일을 parsing 중에
(2) defer javascript를 동시에 다운받도록 명령
(3) 나머지 html 내용을 끝까지 parse
(4) parsing이 완료된 후에 다운로드 된 javascript를 실행
▶html parsing 중에 javascript를 모두 다운 받아 둔 다음에 실행하기 때문에 정의된 순서대로 실행이 가능
▶네 가지 방법 중 가장 효율적이고 안전하다고 볼 수 있음
