JavaScript
JavaScript 기초, async 와 defer의 차이점
김꼬알
2023. 6. 2. 17:14
async vs defer
defer
- 브라우저는 defer 속성이 있는 스크립트를 '백그라운드'에서 다운로드 함
- 따라서 defer 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않으며 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연됨
- 지연 스크립트는 페이지 생성을 막지 않음
- 지연 스크립트는 일반 스크립트와 마찬가지로 HTML에 추가된 순(상대순, 요소순)으로 실행됨
- defer 속성은 <script>에 src가 없으면 유효하지 않음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="test.js"></script>
</head>
<body>
</body>
</html>
async
- async 속성이 붙은 스크립트는 페이지와 완전히 독립적으로 동작
- defer 스크립트와 마찬가지로 백그라운드에서 다운로드 되므로, HTML 페이지는 async 스크립트 다운이 완료되길 기다리지 않고 페이지 내 콘텐츠를 처리, 출력함
- 다른 스크립트들은 async 스크립트를 기다리지 않고, async 스크립트 역시 다른 스크립트들을 기다리지 않음
- 페이지에 async 스크립트가 여러 개 있는 경우, 실행 순서는 다운로드가 끝난 스크립트 순으로 실행됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script async src="test.js"></script>
</head>
<body>
</body>
</html>
실무에서 defer는 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용
async 는 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우에 적용
'use strict';자바스크립트는 유연한 언어이기 때문에, use strict 명령어를 선언해주면 정의되어 있지 않은 변수, 오류를 잡아주고 속도를 향상시키기 때문에 상단에 작성하는 것을 추천
자바스크립트의 공식 사이트 혹은 MDN에서 문서를 확인하고 공부하는 것을 추천