저는 드림코딩 유튜브의 javascipt 강의를 듣고있습니다
제갸 사용하는 IDE는 Visual Studio Code 입니다.
html에서 javascript를 포함하는 방법
1. head 안에 포함하는 방법(좋지 않음)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScipt Study</title>
<script src="main.js"></script>
</head>
<body></body>
</html>
1) 브라우저가 html 파일을 파싱하다가 scipt 태그를 만났을 때
2) html의 파싱을 멈추고
3) javascript파일을 다운받아서 실행 후
4) 나머지 html을 파싱한다.
이 방법은 javascipt파일의 크기가 크고 인터넷이 느린 상황에는 효율적이지 않다.
사용자가 웹사이트를 보기까지 많은 시간이 소요될 수 있다.
2. body태그 마지막에 포함하는 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScipt Study</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>
1) 브라우저가 필요한 HTML을 전부 파싱하여 페이지가 준비됨
2) javascript파일을 다운받아서 실행
■ 장점: 이 방법은 사용자가 기본적인 html 컨텐츠를 바로 볼 수 있다
■ 단점: 웹사이트가 javascipt에 의존적인 경우에 사용자는 의미있는 콘텐츠를 보기위해 javascipt가 실행될 때까지 기다려야한다.
3. head + async
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScipt Study</title>
<script async src="main.js"></script>
</head>
<body>
<p></p>
</body>
</html>
1) 브라우저가 HTML을 파싱하다 script태그를 만나면
2) 병렬로 javascipt파일을 다운받는다.(HTML과 js파일 동시에)
3) javascipt파일 다운로드가 완료되면 HTML파싱을 멈추고 javascipt파일을 실행한다.
4) 끝나면 나머지 HTML을 파싱한다.
■ 장점: 이 방법은 javacipt fetching이 HTML parsing과 병렬적으로 일어나기 때문에 다운로드 시간이 줄어든다
■ 단점:
1) javascipt가 HTML parsing이 끝나기 전에 실행되므로, 실행시점에 원하는 요소가 정의안되어 있는 상황이 발생할 수 있다.
2) 다수 scipt를 다운받는 경우 코드에 정의된 순서보다 먼저 다운로드가 끝난 javascipt파일을 먼저 실행하기 때문에 javascipt파일들이 순서에 의존적이라면 사용하지 않는 것이 안전하다.
4. head + defer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScipt Study</title>
<script defer src="main.js"></script>
</head>
<body>
<p></p>
</body>
</html>
1) 브라우저가 HTML을 파싱하다가 script태그를 만나면
2) 병렬로 javascipt파일을 다운받는다.(HTML과 js파일 동시에)
3) javascipt파일 다운로드가 끝나도 나머지 html 파싱을 진행한다.
4) 파싱이 끝나면 이어서 javascipt를 실행한다.
이 방법이 4개 중 가장 좋은 옵션이다.
javascipt파일들과 html파일 다운로드를 미리 끝낸 다음 기술된 순서대로 javascipt파일을 실행하기 때문에 순서에 의존적인 javascipt파일들을 안전하게 실행할 수 있다.
참고자료: https://www.youtube.com/watch?v=tJieVCgGzhs
