HTML에서 JavaScript를 연결하는 방법 세가지
용어정리
- parsing: 분석하다
- fetching: 가져오다
- executing: 실행하다
1. 키워드 없이 연결
자바스크립트 파일을 가져오고(fetching) 실행(executing)할때 HTML 분석(parsing)이 일시적으로 멈춘다
head에 자바스크립트 파일을 연결했을때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="main.js"></script>
</head>
<body>
</body>
</html>1) HTML 파일 분석 (parsing)
2) head에 위치한 script 코드를 만남
3) JavaScript 파일 가져옴 (fetching) & HTML 파일분석 일시 중지
4) JavaScript 파일 실행 (executing) & HTML 파일분석 일시 중지
5) 나머지 HTML 파일 분석 (parsing)
6) 페이지 준비완료
문제점: 3번 4번에서 일어나는 JavaScript 파일을 가져오고 실행하는 과정에서 HTML 파일이 실행되지 못하고 멈추게됨
body 끝에 자바스크립트 파일을 연결했을때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="main.js"></script>
</body>
</html>1) HTML 파일 분석 (parsing)
2) 페이지 준비완료
3) body 끝에 위치한 script 코드를 만남
4) JavaScript 파일 가져옴 (fetching)
5) JavaScript 파일 실행 (executing)
문제점: 페이지 동작에 필요한 자바스크립트가 페이지가 모두 로딩된 후에 적용되므로 일정시간 자바스크립트가 빠진 사이트가 동작함
2. async
HTML을 읽는(parsing)중에 자바스크립트 파일을 가져오고(fetching) 실행(executing)한다
다만 자바스크립트 파일을 실행(executing)할때는 HTML 읽기(parsing)가 일시적으로 멈춘다
- 장점: 자바스크립트가 함께 동작하는 페이지가 준비된다
- 단점: 자바스크립트 실행중에 HTML 읽기가 중단되므로 페이지 준비가 느리다
async 키워드와 함께 head에 자바스크립트 파일을 연결했을때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script async src="main.js"></script>
</head>
<body>
</body>
</html>1) HTML 파일 분석 (parsing)
2) head에 위치한 script 코드를 만남
3) JavaScript 파일 가져옴 (fetching) & HTML 파일 분석 (parsing)
4) JavaScript 파일 실행 (executing) & HTML 파일분석 일시 중지
5) 나머지 HTML 파일 분석 (parsing)
6) 페이지 준비완료
장점: 키워드없이 스크립트를 넣었을때는 JavaScript 파일 가져올때 HTML 파일 분석을 할 수 없었지만 async 키워드와 함께 스크립트를 넣었을때는 JavaScript 파일 가져올때 HTML 파일 분석을 할 수 있으므로 웹페이지가 준비되는 시간이 더 짧아져 효율적이다
async 키워드와 함께 head에 여러개의 자바스크립트 파일을 연결했을때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
</body>
</html>1) HTML 파일 분석 (parsing)
2) head에 위치한 a.js, b.js, c.js을 불러오는 script 코드를 만남
3) a.js 파일 가져옴 (fetching) & HTML 파일 분석 (parsing)
3) b.js 파일 가져옴 (fetching) & HTML 파일 분석 (parsing)
3) c.js 파일 가져옴 (fetching) & HTML 파일 분석 (parsing)
4) a.js, b.js, c.js 파일 실행 (executing) & HTML 파일분석 일시 중지
5) 나머지 HTML 파일 분석 (parsing)
6) 페이지 준비완료
3. defer
HTML을 읽는(parsing)도중에 자바스크립트 파일을 가져오고(fetching)오기만한다
자바스크립트 파일 실행(executing)은 HTML 파싱이 끝난 후 즉 페이지가 준비되었을때 한다
- 장점: 자바스크립트 실행중에 HTML 읽기가 중단되지 않으므로 페이지준비가 빠르다
- 단점: 자바스크립트가 동작하지 않는 페이지가 준비된다
defer 키워드와 함께 head에 자바스크립트 파일을 연결했을때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script defer src="main.js"></script>
</head>
<body>
</body>
</html>1) HTML 파일 분석 (parsing)
2) head에 위치한 script 코드를 만남
3) JavaScript 파일 가져옴 (fetching) & HTML 파일 분석 (parsing)
4) 나머지 HTML 파일 분석 (parsing)
5) 페이지 준비완료
6) JavaScript 파일 실행 (executing)
문제점: 페이지 동작에 필요한 자바스크립트가 페이지가 모두 로딩된 후에 적용되므로 일정시간 자바스크립트가 빠진 사이트가 동작함
defer 키워드와 함께 head에 여러개의 자바스크립트 파일을 연결했을때
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<script defer src="a.js"></script>
<script defer src="b.js"></script>
<script defer src="c.js"></script>
</body>
</html>1) HTML 파일 분석 (parsing)
2) head에 위치한 a.js, b.js, c.js을 불러오는 script 코드를 만남
3) a.js 파일 가져옴 (fetching) & HTML 파일 분석 (parsing)
4) b.js 파일 가져옴 (fetching) & HTML 파일 분석 (parsing)
5) c.js 파일 가져옴 (fetching) & HTML 파일 분석 (parsing)
6) 나머지 HTML 파일 분석 (parsing)
7) 페이지 준비완료
8) a.js, b.js, c.js 파일 실행 (executing)
'JavaScript' 카테고리의 다른 글
| [JavaScript] Shallow Copy vs Deep Copy (0) | 2024.05.07 |
|---|---|
| [자바스크립트] 호이스팅(Hoisting)이란? (0) | 2022.11.22 |
| [자바스크립트] async & await (0) | 2022.11.20 |
| [자바스크립트] 프로미스 (프로미스 체이닝, 프로미스 에러 핸들링) (0) | 2022.11.18 |
| [자바스크립트] 콜백함수와 콜백지옥 (0) | 2022.11.18 |
댓글