🌈 <head> 안에 옵션 스크립트 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
로드 순서 : HTML 파싱 ⇨ <script> 태그 발견 ⇨ HTML 파싱 중단 ⇨ JS 다운 ⇨ JS 실행 ⇨ 다시 HTML 파싱
단점: JS파일이 엄청 크고 인터넷도 느리면 사용자가 웹사이트를 보기까지 오래 걸린다. 그래서 스크립트를 헤드에 포함하는 것은 좋지 않다.
🌈 <body> 안쪽 끝부분 스크립트 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
로드 순서 : <body> 태그 끝까지 HTML 파싱 ⇨ <script> 발견 ⇨ JS 다운 ⇨ JS 실행
장점: HTML 컨텐츠를 빠르게 본다.
단점: 의미있는 컨텐츠가 JS파일에 의존적이면 사용자가 기다려야 한다.
🌈 <head>안의 <script async....><script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="main.js"></script>
</head>
<body>
</body>
</html>
로드 순서 : HTML 파싱 ⇨ <script async> 발견 ⇨ 병렬로 JS 다운 명령 ⇨ 다시 HTML 파싱 ⇨ JS 다운 완료 ⇨ HTML 파싱 중단 ⇨ JS 실행 ⇨ 남은 HTML 파싱
장점: 다운이 병렬적으로 일어나기 때문에 다운받는 시간을 절약할 수 있다.
단점: JS가 HTML이 파싱이 되기도 전에 실행이 되기 때문에 JS와 관련된 HTML의 요소가 파싱되지 않아 정의되지 않았을 경우 페이지 로드의 위험이 있다. 여전히 사용자가 페이지를 보는데 시간이 오래 걸린다.
🌈 [가장 좋은 방법] <head>안의 <script defer...></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>
로드 순서 : HTML 파싱 ⇨ <script defer> 발견 ⇨ JS 다운 명령 ⇨ HTML 모두 파싱 ⇨ JS 실행
장점: HTML 파싱과 병렬로 JS 다운 후 마지막에 JS파일 실행한다.
'WEB > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 연산, 반복문 (0) | 2021.09.17 |
|---|---|
| [JavaScript] let , var , const / 데이터 타입 (0) | 2021.09.17 |
| [JavaScript] 콘솔 출력 / use strict (0) | 2021.09.17 |
