1. head 내부
: head에 js파일 포함시키기
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="demo1.js"></script>
</head>
<body></body>
</html>
[head 내부 방법]
1. html 위에서 아래로 읽는다. (html parsing)
2. script 태그를 발견 시 읽던 html을 멈추고 JavaScript 파일을 다운 받아 실행한다.
3. 다시 html 위에서 아래로 읽는다. (html parsing)
⚠️ 이 방법은 좋은 방법은 아니다.⚠️
JavaScript 파일이 크면 다운 받는데 속도가 오래 걸리고
그렇게 오래 걸리게 되면 웹사이트가 사용자에게 노출되는 시간이 오래 걸리기 때문이다.
2. body 끝
: body 맨 끝에 script 파일을 포함시키는 것
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div></div>
<script src="demo1.js"></script>
</body>
</html>
[body 맨 끝 방법]
1. html 위에서 아래로 모두 읽는다. (html parsing)
2. html을 모두 읽어 페이지 준비를 마친 후 JavaScript 파일을 다운 받아 실행한다.
⚠️ 이 방법은 좋은 방법은 아니다. ⚠️
웹 사이트가 빨리 준비 된다는 장점이 있지만
사용자가 JS 사용하는 동작을 필요로 하는 경우 JS 파일을 다운 받고 실행하는 시간을 기다려야한다.
3. head + async
: head 내부에 작성하는 대신 async라는 속성값과 함께 선언
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script async src="demo1.js"></script>
</head>
<body></body>
</html>
[head + async]
1. html 위에서 아래로 모두 읽는다. (html parsing)
2. script 태그를 만나면 병렬로 JavaScript 파일을 다운 받으라고 명령을 하고 다시 html을 읽는다.
3. html을 읽다가 JavaScript 파일을 모두 다운하면 html 읽는 것을 멈추고 JavaScript 파일을 실행한다.
4. JavaScript 파일을 실행 후 남은 html을 다시 읽는다.
⚠️ 이 방법도 좋은 방법은 아니다. ⚠️
병렬적으로 js파일과 html파일을 다운 받아서 다운 받는 시간자체는 절약할 수 있지만
html 보다 js 파일이 먼저 다운로드 되기 때문에 querySelector를 이용하는 경우
html에 우리가 사용하려는 요소가 정의 되지 않을 수 있다.
.......................................................................................................
또한 js파일을 실행하기 위해서 html 파일 읽는 것을 멈추기 때문에
웹사이트가 나타나는 시간이 늦춰질 수 있다.
4. head + defer
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script defer src="demo1.js"></script>
</head>
<body></body>
</html>
[head + defer]
1. html 위에서 아래로 모두 읽는다. (html parsing)
2. script 태그를 만나면 JavaScript 파일을 다운 받으라고 명령을 하고 나머지 html을 모두 읽는다.
3. html 파일을 모두 읽은 후 다운 받았던 JavaScript 파일을 실행한다.
💡 이 방법이 가장 좋은 방법이다. 💡
html 읽는 시간에 Js 파일 다운받고 html을 모두 읽으면
Js 파일을 실행 시키기 때문에 웹사이트가 나타는 시간, Js 파일을 다운 받는 시간 또한 절약할 수 있다.
'Web > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 function 문법 사용법 (0) | 2023.07.12 |
|---|---|
| 동적 UI만들기 (alert) (0) | 2023.07.11 |
| [DOM] 제어 대상 찾기 (0) | 2023.07.05 |
| Document Object Model(DOM) (0) | 2023.07.05 |
| [BOM] 창 제어 (0) | 2023.07.04 |
