Just Do IT!

[JavaScript] async와 defer의 차이점 본문

개발 공부/JavaScript

[JavaScript] async와 defer의 차이점

MOON달 2022. 12. 2. 12:13
728x90
반응형

<script> 태그는 HTML 파일 어디에 넣어야 할까?

 

1. <head> 태그 안에 <script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body>
    
</body>
</html>

  • js 파일의 사이즈가 크다면 웹사이트를 사용자가 보는 데까지 많은 시간이 소요된다.

 

 

2. <body> 태그 안에 <script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    <div></div>
    <script src="main.js"></script>
</body>
</html>

  • 기본적인 HTML 파일을 빨리 볼 수 있지만 사용자가 의미 있는 콘텐츠를 보기 위해서는 fetching과 실행하는 시간을 기다려야 한다.

 

 

3. head + async

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script async src="main.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

  • JS 파일 다운로드 받는 시간 절약 가능
  • 자바스크립트 파일에서 DOM 요소를 조작하려는 시점에 HTML 파일이 정의되지 않는 위험한 요소가 생길 수 있다.
  • 사용자들이 페이지를 로드하는데 여전히 시간이 걸린다.

 

 

4. head + defer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="main.js"></script>
    <script defer src="main2.js"></script>
    <script defer src="main3.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

  • 가장 좋은 옵션
  • 순서대로 실행할 수 있어서 가장 안전하다

 

 

5. head + async

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script async src="main.js"></script>
    <script async src="main2.js"></script>
    <script async src="main3.js"></script>
</head>
<body>
    <div></div>
</body>
</html>

  • 먼저 다운로드 된 파일을 먼저 실행 (정의된 순서는 상관이 없다)
  • 순서에 의존적이라면 문제가 발생할 수 있다.

 

 

 

 

 

드림코딩 자바스크립트 강의를 들을 때 가장 처음으로 나왔던 부분인데,

영 헷갈려서 나중에 찾아볼 수 있을 것 같아서 적어두었다.

 

저번 프로젝트를 할 때는 module 형식으로 script를 받아왔던 것 같고, <body> 태그에 넣었던 것 같은데

이런 방법들이 있구나, 하고 짚고 넘어간다.

 

조금 복잡한 프로젝트를 하거나, 아니면 async와 defer의 차이점에 대해 헷갈릴 때 보면 좋을 것 같다.

(사실 이걸 정리해놓고 있어도...<body> 태그에 넣을 것 같긴 하다 ㅎㅎ 그래도 나중을 대비해서...)

728x90

'개발 공부 > JavaScript' 카테고리의 다른 글

[JavaScript] 계산기 만들기 (HTML+CSS+JS)  (1) 2023.03.23
[JavaScript] lodash 라이브러리  (0) 2023.02.02
[JavaScript] 정규 표현식 (Regular Expressions) 이해하기  (0) 2022.12.16
[JavaScript] 실행 컨텍스트  (0) 2022.12.03
[JavaScript] DOM 기초  (0) 2022.12.01
'개발 공부/JavaScript' Related Articles more