1. head 내부 <script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="main.js"></script>
</head>
<body></body>
</body>
</html>
동작순서: HTML을 parsing 하다가 script를 만나면 main.js를 가져오고, 실행 그리고 다시 pasing HTML
| parsing HTML | blocked | parsingHTML | page is ready | |
| fetching js | executing js | |||
- 단점: 사용자에게 페이지 보여지는게 늦어짐
2. body 내부 하단 <script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body></body>
<script src="main.js"></script>
</body>
</html>
동작순서: HTML parsing 후 main.js 가져오고 실행
| parsing HTML | page is ready | fetching js | executing js |
- 단점: js파일에서 데이터를 가져와서 페이지를 보여줘야하는 경우 에러 발생
3. head + async
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script asyn src="main.js"></script>
</head>
<body></body>
</body>
</html>동작순서: asyn 옵션 boolean type(default: true), 브라우저가 pasing 하다가 fetch 명령하고 실행, 그리고 다시 parsing HTML
| parsing HTML | blocked | parsing HTML | page is ready | |
| fetching js | executing js | |||
4. head + defer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="main.js"></script>
</head>
<body></body>
</body>
</html>
동작 순서: defer 옵션: parsing 하다가 fetch만하고 다시 parsing후 parsing 이 끝나고 실행
| parsing HTML | page is ready | executing js | ||
| fetching js | ||||
'Front-end > JavaScript' 카테고리의 다른 글
| [JavaScript] 템플릿 리터럴(Template literals), 태그드 리터럴(tagged literals) (0) | 2023.07.01 |
|---|---|
| [JavaScript ES6] 변수(variable) var let const 와 Hoisting, 전역변수, 참조 (0) | 2023.07.01 |
| [JavaScript] Arrow function 화살표 함수 (0) | 2023.07.01 |
| [JavaScript] this 키워드 (0) | 2023.07.01 |
| [JavaScript] 프로미스(Promise) (0) | 2023.05.23 |
