우리는 보통 웹페이지를 만들 때 아래처럼 적는다.
<head>
<script src="script.js"></script>
</head>
<body>
<h1>hello</h1>
</body>
위의 코드의 경우,
위의 head 태그부터 코드를 읽다가 script.js를 만나면 바로 실행되기 때문에
그동안 나머지 HTML 부분은 멈추게 된다.
이게 바로 느려지는 이유
그래서 등장했다.
defer / async
defer
<!DOCTYPE html>
<html>
<head>
<script defer src="script.js"></script>
</head>
<body>
<p>📄 본문 내용</p>
</body>
</html>// script.js
console.log('🕓 defer 실행됨!');
1. HTML 파싱과 script 파일 다운로드 동시에 시작
2. HTML 다 파싱된 후 console.log 출력됨
‼️단, 여러 defer 스크립트가 있다면 작성 순서대로 실행됨
async
<!DOCTYPE html>
<html>
<head>
<script async src="script.js"></script>
</head>
<body>
<p>📄 본문 내용</p>
</body>
</html>// script.js
console.log('⚡ async 실행됨!');
1. HTML 파싱 중 script 파일 다운로드 시작
2. 다운로드가 끝나는 순간 바로 실행됨
3. 그러면서 HTML 파싱은 잠깐 멈추게 됨
🔥실행 순서가 보장이 안되기 때문에, 선착순처럼 빠르게 도착하는 스크립트가 먼저 실행된다.
| 속성 | HTML 읽는 중 스크립트 다운로드 여부 | HTML 다 읽은 뒤 실행여부 | 순서대로 실행여부 |
| 기본 | HTML 멈추고 즉시 실행 | NO | YES |
| defer | 동시에 다운로드 | HTML 끝난 후 실행 | YES |
| async | 동시에 다운로드 | 다운로드 끝나는 즉시 실행 | 순서 보장 안됨 |
정리하자면
🔥 defer
HTML과 자바스크립트 동시에 읽혀지나
HTML 먼저 다 읽고 자바스크립트 실행은 나중에, 천천히 실행함
순서 지킴
🔥 async
HTML과 자바스크립트 동시에 읽혀지나
HTML 읽다가 만약 자바스크립트가 빨리 받아지면 HTML 멈추고 자바스크립트 실행되버림
순서 안지킴
반응형
'Programming > JavaScript' 카테고리의 다른 글
| 자바스크립트에서 this란? (1) | 2025.04.11 |
|---|---|
| 자바스크립트 객체(JavaScript Objects) (0) | 2022.11.10 |
| 자바스크립트 함수(JavaScript Functions) (0) | 2022.10.26 |
| 자바스크립트 데이터 타입(JavaScript Data Types) (0) | 2022.10.24 |
| 자바스크립트 할당(JavaScript Assignment) (0) | 2022.10.24 |
