고정 헤더 영역
상세 컨텐츠
본문
안녕하세요 오늘은 자바스크립트를 불러올때 쓰는 script async와 defer의 차이점을
알아보겠습니다.
async
async는 자바스크립트를 불러올때 이것을 사용하면 우선 자바스크립트를 먼저 불러 오라고 시킵니다
그다음 html를 불러오다가 자바스크립트가 다 불러와졌다고 하면 html작업을 멈추고 자바스크립트를 실행합니다.
그다음 다시 html를 불러옵니다.
다시 이걸 간단히 해보면
1. 자바스크립트를 불러오라고 시킨다.
2. html 불러 온다.
3. 자바스크립트가 다 불러와졌다고 하면, html 불러오는걸 멈추고 자바스크립트를 실행시킨다
4. 자바스크립트를 실행시킨후, html를 다시 불러온다.
근데 이쪽에서 문제점이 무엇일까요?
바로 html이 불러오다가 멈춘다는것 입니다.
성능이 안좋은 컴퓨터에서는 다 써지지 않은 html를 볼수있다는것 입니다.
이제 이것의 사용법을 알아 보면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>java script</title>
<script async src="asyncDefer.js"></script>
</head>
<body>
</body>
</html>
이런식으로 나타낼수있습니다.
defer
defer은 자바스크립트를 불러올때 async와 같이 자바스크립트를 불러오라고 시킵니다.
그다음으로 html를 로드 합니다. 자바스크립트가 다 불러와져도 html를 마져 다 로드 합니다.
이제 마지막으로 자바스크립트를 실행 시킵니다.
이걸 다시 순서있게 나타내어 볼게요
1. 자바스크립트를 불러오라고 시킨다.
2. html를 불러오라고 시킨다.
3. 자바스크립트가 다 불러와져도 html먼져 다 불러온다.
4. 마지막으로 자바스크립트를 실행한다.
제 생각엔 defer이 훨씬 좋은것 같네요
저뿐만 아니라 다른 개발자분들도 defer을 널리 씁니다!(저는 개발자 아님)
마지막으로 사용법에 대해 알아보면,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>java script</title>
<script defer src="asyncDefer.js"></script>
</head>
<body>
</body>
</html>
이런식으로 할수있겠네요!!
끝!
'프로그래밍 언어 > 자바스크립트' 카테고리의 다른 글
| [자바스크립트] class 개념/사용법 (getter와 setter) (3) | 2023.12.06 |
|---|---|
| [자바스크립트] 함수에 대해 알아보자(function, array function) (1) | 2023.11.27 |
| [자바스크립트] 조건문 if, ?, switch 개념/사용법 (1) | 2023.11.20 |
| [자바스크립트] 오프젝트에 대해 알아보자 (1) | 2023.11.16 |
