[JS] defer와 async

공부기록·2024년 1월 25일

1. defer

<script src="./script.js"/>

스크립트 파일을 불러올 때 쓰는 익숙한 코드 한 줄이다.

body 태그의 최하단에 작성해서 스크립트 파일을 가장 나중에 불러오는 방법도 있지만,
보통은 head 태그 안에 작성하고 코드 끝에 'defer' 키워드를 붙이는 게 좋다고 배운다.

<head>
	...
	<script src="./script.js" defer />
</head>

이렇게.

그럼 왜 이렇게 해야 할까?

이 화면은 페이지를 처음 불러올 때 네트워크가 파일들을 어떤 순서로 가져오는지 볼 수 있는 크롬 개발자 도구의 'Performance' 탭이다.

왼쪽부터 index.html 파일을 먼저 불러오고, 그 다음에 app.css > vendor.js > app.js 순으로 1000ms 안에 이 네 가지 파일들을 불러오고 있다.

(+ index.html 파일을 제일 먼저 불러온다는 건 웹페이지가 HTML 구조를 모두 파악한 후에 css와 js 파일을 불러와서 입힌다는 것이다.)

로컬 환경이라면 빠르게 파일들을 불러오지만, 실제로 웹 호스팅을 통해 불러온다면 속도가 더 느려지기 때문에 파일을 불러올 때부터 지연을 확실하게 줄여줘야 한다.

==> 이런 경우 defer를 쓴다.

하지만 어떤 경우에는 HTML 구문 분석이 필요하지 않고, script 파일을 미리 로드하고 실행해야 한다. (HTML 코드에 의존하지 않는 경우.)

<head>
	...
	<script src="./script.js" async />
</head>

async로 스크립트 파일을 불러오면 HTML 구문 분석을 기다리지 않고 바로 스크립트 코드를 실행한다.

나는 화면 개발 작업이 대부분이라서 async로 불러온 적은 한 번도 없지만, defer와 차이점이 있으며 나름의 쓰임새가 있으므로 한번 짚고 넘어갈 필요는 있어 보인다.

주로 웹 페이지와 상호작용하지 않고, 백그라운드 서버에 일부 데이터만 전송할 때 사용되는 키워드라고 한다.

==> 이런 경우 'async'를 쓴다.

<head>
    <script src="./vendor.js" defer />
	<script src="./app.js" defer />
</head>

==> vendor.js > app.js 순으로 실행.

<head>
    <script src="./vendor.js" async />
	<script src="./app.js" async />
</head>

==> app.js가 먼저 실행될 수도, vendor.js가 먼저 실행될 수도...

defer와 async는 인라인 스크립트 태그에 적용 시 작동하지 않는다!
파일을 불러오기 위해 존재하는 키워드들인데, 인라인 스크립트는 파일을 불러오는 형식이 아니기 때문이다.

<head>
    <script defer>	// Don't!
    	alert("하이")	
    </script>
</head>

<head>
    <script async>	// Don't!
    	alert("하이")	
    </script>
</head>

추가로, 인라인 스크립트는 웬만하면 지양하는 게 좋다.
스크립트 파일로 빼서 따로 관리하자. ⌒‿⌒

배우거나 해결한 것들 기록