참고 강의
- [드림코딩] 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향 | 프론트엔드 개발자 입문편 (JavaScript ES5+) https://youtu.be/tJieVCgGzhs?feature=shared
엘리 쌤이 소개해주는 방법은 여러가지가 있었다.
- Head 안에 script 태그 작성
- Body 안, 가장 끝에 script 태그 작성 ☜ 이게 평소 내가 사용하던 방법.
- Head 안, async 속성 사용하기
- Head 안, defer 속성 사용하기 ☜ 이게 가장 효율적이라고 한다.
내가 기존에 사용하던 2번 방법은 지금까지 왜 주로 사용되어왔던건지,
그리고 4가지 방법 중 4번 방법이 가장 효율적인 이유는 무엇인지를 중점으로 남겨보고자 한다.
난 async 속성, defer 속성의 존재 자체를 강의 당시에 처음 알아서 충격적이었다 흑흑
강의를 들으면,
이 게시글에 적혀있지 않은 나머지 방법을 사용하는 방법과,
4가지 방법의 장단점을 더 자세히 알 수 있다.
◾ body 안, 제일 끝 부분에 script 태그 포함하기
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
.
.
.
<script src="main.js"></script> // 이렇게!
</body>
</html>
장점
- head에 자바스크립트 파일을 포함할 경우, HTML의 Parsing 중 Script 태그를 만났을 때 Parsing을 멈추고 JS파일의 Fetching과 Executing이 진행된다고 한다. 그래서 사용자에게 웹페이지가 로딩되기까지 시간이 많이 걸림.
- 하지만 <body> 태그 끝에 스크립트파일을 넣게 되면, 자바스크립트 파일을 다운받기 전 부터 웹페이지 Parsing이 완료됨. 자바스크립트가 실행되지 않아도 사용자가 기본적인 html 컨텐츠를 빠르게 볼 수 있다.
- 이런 이유에서 권장되었던 방법이구나...!
단점
- 웹사이트가 자바스크립트에 의존적이라면, 사용자가 의미있는 컨텐츠를 보기 위해서는 fetching, excuting 시간을 기다려야 한다.
◾ ⭐ Head + defer ⭐
HTML의 Parsing과 함께 JS파일의 Fetching이 병렬적으로 실행될 수 있도록 하는 옵션이다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="main.js"></script> // 여기!
</head>
◾ async VS defer
async과 defer 모두 HTML의 Parsing과 함께 JS파일의 Fetching이 병렬적으로 실행될 수 있도록 하는 옵션이다.
- async는 Fetch가 완료되고 나면 Parsing을 중단한 후 JS파일을 실행하고, 실행이 완료된 뒤 이어서 Parsing을 진행.
- defer는 Fetch를 Parsing과 병렬적으로 시행하되 Executing은 HTML의 Parsing이 끝난 뒤에 시행한다.
⭐ 불러와야 할 스크립트 파일이 여러 개 있을 경우, defer가 더 안정적이고 효율적이다.
- Head + Async
- 선언 순서에 상관없이 먼저 Fetch가 된 자바스크립트 파일부터 실행된다.
- 내 자바스크립트가 순서에 의존적이라면, async 사용은 불안정할 수 있다.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script asyc src="a.js"></script> <script asyc src="b.js"></script> <script asyc src="c.js"></script> </head>
- Head + defer
- Fetching과 Parsing을 동시에 진행
- Parsing이 끝난 후, Fetch 했던 JS 파일들을 실행한다.
- 선언 순대로 실행이 되기 때문에, 순서에 의존적이여도 안정적일 수 있다.
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script defer src="a.js"></script> <script defer src="b.js"></script> <script defer src="c.js"></script> </head>
그러므로, defer 옵션 쓰는게 제일 안정적 + 효율적이다!
'Programming > Javascript' 카테고리의 다른 글
| [Javascript] let과 var의 차이 (var hoisting) / var 보다 let이 추천되는 이유 (0) | 2024.06.01 |
|---|---|
| . (0) | 2024.05.31 |