async vs defer의 차이를 알기 위해서
자바스크립트를 HTML 문서에 포함하는 여러가지 방법을 알아보겠습니다.
1. <head></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="script.js"></script>
</head>
<body>
</body>
</html>
이 경우에는 사용자가 html파일을 다운 받았을때 브라우저는 한줄한줄 parsing 과정을 거치게 됩니다.
위에서 부터 한줄씩 차례로 분석해서 내려오다가 script 태그를 만나면 html parsing을 멈추고 필요한 자바스크립트 파일을 서버에서 다운받고(fetching js) 다운받은 파일을 실행 합니다.(excuting js) 그리고 다시 이어서 나머지 html을 parsing 합니다.
| parsing html | fetching js | excuting js | parsing html |
문제점 : 만약 js파일이 아주 클 경우 다운받는 오랜시간 동안 사용자는 빈 화면을 보게 된다.
2. body 끝에서 스크립트 불러온다.
<!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="script.js"></script>
</body>
</html>이 경우에는 html parsing이 모두 끝난 후에 파일을 다운 받고 실행한다.
| parsing html | fetching js | excuting js |
문제점 : 자바스크립트 파일이 크고 중요하고 들어가는 페이지라면 html문서를 모두 파싱한 후에 다운받고 실행해야 하기 때문에 스크립트를 다운받는 시간 실행되는 시간 모두 기다려아 하는 단점이 있다.
3. asyn 사용
<!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="script.js" asyn></script>
</head>
<body>
</body>
</html>
head 안에 asyn 속성을 사용하면 html문서를 파싱하다가 asyn 명령을 만나면 자바스크립트 파일을 다운받는 명령을 병렬로 걸어 놓고 다시 html 파싱작업을 한 후 다운을 다 받으면 html 파싱을 잠시 멈추고 실행을 한다.
| parsing html | block | parsing html | |
| fetching js | excuting js | ||
문제점 : 이 경우 자바스크립트가 html 문서가 parsing 되기도 전에 스크립트가 실행 되기 때문에 스크립트로 dom요소를 조작하려고 할때 조작하려는 요소가 아직 정의가 안될 수가 있다.
또 다른 스크립트를 다운 받는 동안 html 파싱작업을 병렬고 같이 하기 때문에 다운 받는 시간은 줄일 수 있지만 실행되는 동안은 멈추기 때문에 역시 그동안은 사용자가 페이지를 확인하는데 딜레이가 생기게 된다.
4. 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 src="script.js" defer></script>
</head>
<body>
</body>
</html>html을 parsing 하다가 defer을 만나면 병렬로 스크립트 파일 다운을 걸어 놓고 html 파싱이 완료 되면 스크립트를 실행한다.
| parsing html | excuting js | ||
| fetching js | |||
따라서 head에 defer속성을 사용하는게 가장 이상적인 방법이다.
만약 스크립트가 여러개일 경우 async vs defer
async
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script1.js" async></script>
<script src="script2.js" async></script>
<script src="script3.js" async></script>
</head>
<body>
</body>
</html>순서에 상관없이 feching이 먼저 되는 순서에 따라 실행이 되고 실행 되는 동안 html parsing을 멈춘다,
| parsing html | block | block | parsing html | block | parsing html | |
| fetching script1.js | excuting script1.js | |||||
| fetching script2.js | excuting script2.js | |||||
| fetching script3.js | excuting cript3.js | |||||
defer
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
<script src="script3.js" defer></script>
</head>
<body>
</body>
</html>다운받는 순서에 상관없이 html parsing이 모두 끝난 후 우리가 정의 한 순서대로 실행을 하게 된다.
| parsing html | excuting script1.js | excuting script2.js | excuting script3.js | |||
| fetching script1.js | ||||||
| fetching script2.js | ||||||
| fetching script3.js | ||||||
참고 : https://www.youtube.com/watch?v=tJieVCgGzhs
'javaScript > J Query & 스크립트' 카테고리의 다른 글
| const 상수 배열 선언시 변경 (0) | 2022.02.15 |
|---|---|
| == === 차이점 (JavaScript) (0) | 2022.02.14 |
| var let const 차이 (0) | 2022.02.09 |
| 자바스크립트 공식사이트 (0) | 2022.02.07 |
| .off('click') .on('click') 와 .on('click')의 차이 (0) | 2022.01.04 |
댓글