<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>1) head 안에 스크립트를 그냥 포함할 경우
-> 사용자가 html 파일을 다운 받았을때 브라우저가 한줄씩 파싱(분석)하면서 css와 병합해 Dom 요소로 변환함
-> 스크립트를 태그를 만나면 파싱을 멈추고 필요한 자바스크립트 파일을 가져와서 읽고나서 파싱을 다시 시작한다.
단점 : js파일이 크고 인터넷이 느려지면 페이지 로드가 느려진다.
2) body 안에 끝부분에 스크립트를 추가
-> 브라우저가 html 을 다운받아서 페이지가 준비가 된다음에 스크립트를 만나서 서버에서 패칭해서 실행한다. -> 사용자가 기본적인 html 파일을 먼저 볼수 있게한다.
단점 : 웹 사이트가 자바스크립트에 의존적인 파일이면 사용자가 정상적인 페이지를 보기전까지 서버에서 패칭하는시간도 기다려야하고 실행하는 시간도 기다려야한다.
3) head + asyn (async는 불리언 타입, 선언하는것만으로도 true)
-> head안에 스크립트를 쓰되 asyn 라는 속성값 사용하면 브라우저가 파싱하다가 asyn 를 만나면 자바스크립트를 병렬로 실행시키고 파싱을 이어가다가 다운로드가 완료되면 js파일을 실행하고 나머지를 파싱한다.
단점 : 이러면 패칭이 html 파일을 읽는것과 동시에 일어나기때문에 그만큼 시간이 줄지만 js가 html이 파싱되기도 전에 완료가 되서 만약 js에서 조작하려고하는 시점에
html 파일에서 원하는 요소가 아직 정의가 안되어 있을 수 도 있다. 여전히 사용자가 페이지를 보는데 시간이 걸림
4) head + defer
-> 파싱중에 defer를 만나면 다운로드를 명령만하고 나머지 html을 끝까지 파싱한다.
-> 그리고 마지막에 js 실행
asyn vs defer
asyn 는 여러개 사용하면 먼저 다운로드되는 파일부터 실행한다. 정의된 스크립트 순서는 상관없음
defer같은 경우는 전부 다운받아오고나서 순서대로 보여준다.(defer 옵션이 제일 효율적이고 안전.)
자바스크립트를 이용할때는 제일 위에는 'use strict'를 정의해주면 좋다. 효율적인 동작이 가능
