포시코딩

script 파일 불러올 때 쓰는 defer가 뭘까? (async, defer) 본문

JavaScript

script 파일 불러올 때 쓰는 defer가 뭘까? (async, defer)

포시 2022. 10. 19. 17:02
728x90

HTML 파일에서 script 파일을 불러와야 할 때가 있다. 

이 때, 옵션으로 defer 혹은 async 를 볼 수 있는데, 이 옵셥들은 무엇을 의미하는걸까?

 

먼저, 자바스크립트는 HTML 태그 안에서 사용할 수 있다.

<script>
    const btn = document.querySelector('#btn');
    btn.addEventListener('click', () => {
        alert('hi');
    })
</script>
<button id="btn">버튼</button>

body 태그 안에서 위처럼 코드를 짰을 때, 버튼을 누르면 alert 으로 hi 가 나와야 하지만

이 코드는 제대로 작동하지 않는다. 

무엇이 문제일까

 

button 을 만드는 HTML 보다 먼저 스크립트가 선언됐기 때문에 

btn 이라는 id 를 가진 요소가 만들어지기도 전에 실행 되버려 작동하지 않게 된 것이다. 

 

이를 해결하려면 스크립트 부분을 body 태그 상에서 제일 하단에 위치시키거나 

따로 js 파일로 빼서 script 를 불러오는 방식으로 진행해야 할 것이다. 

 

test.js

const btn = document.querySelector('#btn');
btn.addEventListener('click', () => {
    alert('hi');
});

index.html

..생략
	<title>Test</title>
    <script src="js/home/test.js"></script>
</head>
<body>
    <button id="btn">버튼</button>
..생략

그래서 이번엔 test.js 파일에 해당 코드를 옮겨 불러오는 방식으로 진행해보았다.

하지만 이번에도 작동되지 않을 것이다. 

 

마찬가지로 test.js 파일을 읽어 불러왔지만 불러오는 동안 

HTML 렌더링이 끝나지 않았기 때문에 작동되지 않는것이다. 

이를 해결하려면 어떻게 해야할까

 

script 를 불러올 때 옵션으로 async 와 defer 를 줄 수 있다. 

<script src="js/home/test.js" async></script>
<script src="js/home/test.js" defer></script>

 

async

async 는 HTML 렌더링과 동시에 스크립트를 읽게 되고 스크립트를 다 읽으면 그 즉시 실행된다. 

때문에 위 코드에 대해서는 정상작동 하겠지만

가능성은 극히 낮으나 스크립트를 다 읽었는데 렌더링이 덜 됐거나

스크립트 파일이 워낙 용량이 커서 다 읽는데 시간이 걸리는 상황이 생길 수 있다.

 

그리고 async 는 애초에 비동기 라는 의미이기 때문에

여러 스크립트를 async 로 불러올 경우 먼저 로드된 스크립트 순으로 실행된다. 

때문에 서로 의존성이 있는 스크립트를 불러왔을 경우 제대로 실행되지 않는 경우가 생길 수 있다.

 

ex) jQuery 를 불러오는 스크립트와 jQeury를 사용하는 스크립트를 async 로 불러오는 경우

 

defer

반면, defer 는 HTML 이 모두 렌더링이 된 후 '순서대로' 실행된다. 

그래서 대부분의 상황에서는 스크립트를 불러올 때 defer 를 쓰는걸 권장한다. 

 

 

**

but, Google Analytics 와 같이 스크립트간의 의존성도 없고

HTML 에도 영향을 미치지 않는다면

async 가 더 효율적일 수 있다. 

 

 

참고한 자료들

https://www.youtube.com/watch?v=l5r8unbAGeE 

https://wormwlrm.github.io/2021/03/01/Async-Defer-Attributes-of-Script-Tag.html

 

스크립트의 실행 시점을 조절하는 Async와 Defer 속성 - 재그지그의 개발 블로그

로드한 스크립트의 실행 시점을 조절할 수 있게 만들어주는 Async와 Defer 속성에 대해 알아봅니다.

wormwlrm.github.io

 

728x90
저작자표시

'JavaScript' 카테고리의 다른 글

Promise, async/await을 통한 순차실행 - 작성중  (0) 2022.12.03
클립보드에 복사  (0) 2022.11.09
Array.sort() 배열 내 오브젝트 값으로 정렬하기  (0) 2022.07.08
Array.prototype.find()  (0) 2022.07.08
Promise 예제  (0) 2022.06.18
'JavaScript' Related Articles more