<script> 태그의 defer 속성 / async VS defer

Kiwisae 2023. 3. 22. 10:53

<script src="assets/scripts/app.js" defer></script>

페이지가 모두 로드된 후 해당 외부 스크립트가 실행된다는 것을 명시

boolean 속성으로, 명시하지 않으면 자동으로 false 값을 가지고,

명시한 경우 true 값으로 처리된다.

외부 스크립트를 참조하는 경우에만 사용할 수 있어서

src 속성을 반드시 함께 사용해야 한다.

참조된 외부 스크립트 파일은 여러 가지 방법으로 실행시킬 수 있다.

async 속성은 다운로드가 끝나면 바로 js 코드를 실행하기 때문에

어느 시점에 실행될지 알 수 없다.

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

여러 개의 스크립트 파일을 순차 실행할 때에는 defer가 좋다.

여러개의 독립된 js 파일을 삽입하는 경우에는 async를 사용하는 것이 성능 면에서 유리하다.

다운로드 완료 즉시 실행되기 때문이다.

1. async 속성이 명시된 경우

브라우저가 페이지를 파싱하는 동안에도 스크립트 실행

2. async 속성은 명시X, defer 속성만 명시

브라우저가 페이지의 파싱을 모두 끝내면 스크립트 실행

3. async 속성과 defer 속성이 모두 명시 X

브라우저가 페이지를 파싱하기 전에 스크립트를 가져와 바로 실행시킨다