async & defer

RRS_SH 2023. 2. 15. 23:30

이 JavaScript는 드림코딩 자바스크립트 기초강의를 보며 정리한 자료 입니다.

https://www.youtube.com/@dream-coding

www.youtube.com

Script가 head에 위치할 경우

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script src="main.js"></script>
	</head>
</html>

head안에 script를 포함하면 한줄한줄 씩읽어 DOM요소로 파싱하는 과정에 Script를 만나면 변환을 멈추고 js파일을 다운 받고, 실행한 다음에 나머지를 파싱한다. 때문에 사용자가 웹사이트를 보기까지 오래 걸린다. 효율적이지 못하다.

Script가 하단에 위치할 경우

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
	</head>
	<body>
		<div></div>
		<script src="main.js"></script>
	</body>
</html>

Scirpt를 맨 끝에 배치할 경우 HTML을 먼저 파싱한 후 js파일을 다운 받고, 실행한다. 이 경우 사용자가 HTML의 컨텐츠를 빨리 본다는 장점은 있지만 js에 의존적인 사이트일 경우 정상적인 화면을 보기 까지 오래 걸린다는 단점이 있다.

Script가 head에 위치 + async사용할 경우

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script async src="main.js"></script>
	</head>
	<body>
		<div></div>
	</body>
</html>

async를 사용할 경우 HTML코드를 파싱하다 async를 만나면 병렬로 다운을 받다가 파싱을 멈추고 Script실행 후 다시 나머지를 파싱한다. 페이지 완성 시간이 줄어든다는 장점이 있지만 Script실행이 먼저 되기 때문에 아직 생성되지 않은 HTML요소들에 적용이 안되는 문제가 발생할 수 있다는 단점이 있다.

Script가 head에 위치 + defer사용할 경우

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<script defer src="main.js"></script>
	</head>
	<body>
		<div></div>
	</body>
</html>

defer를 사용할 경우 HTML코드를 파싱하다 defer를 만나면 병렬로 js파일을 다운 받는다. 그와 동시에 끝까지 파싱을 한 후에 js를 실행한다. 가장 시간이 적게 들고 효율적인 방법이다.

async와 defer의 또 다른 차이점으로 여러 개의 js를 불러올 경우 async는 다운이 먼저 된 순서대로 실행을 하지만 defer는 다운 하고 파싱 완료 후 순서대로 실행 되기 때문에 js가 순서에 의존적일 경우 async사용시 js의 명령이 꼬일 수 있다.