고정 헤더 영역
상세 컨텐츠
본문
반응형
✅ SCRIPT
HTML은 코드 실행 중에 <script>를 만나면 자바스크립트 파일을 다운하고, 스크립트가 실행 완료될 때까지 HTML코드를 읽어오는 걸 중단한다.
<script src="script.js"></script>
또, 한 스크립트가 다른 스크립트에 의존하고 있다면 순차적으로 연결된 스크립트를 실행하기 때문에, HTML 코드를 실행하기 까지 기다리는 시간은 더 길어질 것이다.
💡 만약 <script>를 헤더가 아니라 <body> 끝에 넣는다면?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<div></div>
<script src="main.js"></script>
</body>
</html>
이 경우엔 브라우저가
HTML 코드 읽어오는 걸 마치고 → 자바스크립트 파일을 다운 → 자바스크립트를 실행한다.
HTML이 로드 될 때까지 기다리지 않아도 되지만, 자바스크립트에 의존적인 코드라면 정상적인 웹페이지를 보기까지 많은 시간이 걸린다는 문제가 있다.
결국 이런 문제를 해결하기 위해 고안된 게 Async와 Defer이다. 이 둘은 브라우저가 HTML 코드를 읽는 작업(parsing)과 자바스크립트 파일을 다운받는 과정을 동시 병렬적으로 진행할 수 있다.
앞으로 설명을 간단히 하기 위해 정리하고 가자.
- parsing : HTML 코드를 한줄씩 읽어오는 것
- fetching : 자바스크립트 파일을 다운로드 하는 것 (실행은 포함되지 않음)
🔥 Async
<script src="script.js" async></script>
- parsing과 fetching을 동시에 함 → 다운로드 시간 절약
- js파일이 다운되는 대로 실행시킴 → 실행에 앞서 우리가 선언한 요소가 정의가 안되었다면 문제가 생길 위험 (query로 가져온 요소가 아직 로드가 안되었다던가)
* 스크립트가 실행되는 동안에 parsing은 중단됨
🔽 스크립트가 여러개인 경우
- 스크립트가 여러개일 때 빨리 다운되는 쪽부터 실행되기 때문에 스크립트 순서가 중요한 경우엔 뒤죽박죽이 될 위험
- 다른 스크립트들과 독립적으로 실행되는 스크립트에 쓰면 좋음
🔥 Defer
<script src="script.js" defer></script>
- 마찬가지로 parsing과 fetching을 동시에 하기 때문에 다운로드 시간이 절약됨
- Async와 다른 점은 parsing을 완료할 때 까지 자바스크립트의 실행을 지연시킨다는 점
* defer가 '지연시키다'라는 뜻
- DOM사용이 많을 때 유용함. 가장 BEST 옵션!!
🔽 스크립트가 여러개인 경우
- parsing이 끝나고 스크립트들이 순서대로 실행되기 때문에 순서가 뒤죽박죽 될 염려가 없음
📚 Reference
- Codecademy, Javascript Interactive Website
반응형
'IT > Javascript' 카테고리의 다른 글
| DOM appendChild로 리스트에 요소 추가하기 (0) | 2021.01.21 |
|---|---|
| 자바스크립트 동등 연산자 == 와 일치 연산자 === (0) | 2021.01.18 |
| 자바스크립트 런타임 & 이벤트 루프 (MDN) (0) | 2020.10.19 |
| 코드카데미 Javascript - HTTP란? (0) | 2020.10.17 |
| 코드카데미 자바스크립트 class 연습문제 Find Your Hat (0) | 2020.10.14 |
댓글 영역