Defer와 Async의 차이점

웹 페이지에 자바스크립트 파일을 로드하는 방식은 페이지의 로드 시간과 사용자 경험에 큰 영향을 줍니다. 

이 중 defer와 async 속성을 사용하는 것이 일반적입니다. 

그렇다면 defer와 async의 정의와 차이점에 대해서 알아봅시다.

 

Defer

defer은 HTML을 파싱 하는 동안 스크립트를 다운로드하고, HTML 파싱이 완료된 후에 스크립트를 실행합니다.

주요 특징

• 문서 파싱이 완료된 후, DOMContentLoaded 이벤트 바로 전에 실행됩니다.
• defer로 명시된 스크립트들은 서로의 순서를 지키면서 실행됩니다.

사용 예시

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

 

 

Async

HTML을 파싱하는 동안에도 스크립트를 다운로드하며, 스크립트 다운로드가 끝나는 대로 파싱을 멈추고 스크립트를 즉시 실행합니다.

 

주요 특징

• 스크립트를 비동기적으로 로드하고 실행하기 때문에, 스크립트 로드 시간에 HTML 파싱이 차단되지 않습니다.
• 여러 개의 async 스크립트가 있을 경우, 로드 완료된 순서대로 실행되기 때문에 순서에 의존하는 코드에서 문제가 발생할 수 있습니다.

사용 예시

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

 

 Defer와 Async의 차이점

실행 시점

• defer :  문서의 파싱이 완료된 후에 실행되며 DOMContentLoaded 이벤트 전에 호출됩니다.
• async : 스크립트 다운로드가 완료되는 즉시 실행되므로, 문서 파싱과 관계없이 바로 실행됩니다.

 

스크립트 실행 순서

• defer : HTML에 선언된 순서대로 스크립트가 실행됩니다.
• async : 다운로드 완료된 순서에 따라 실행됩니다. 출처와 상관없이 먼저 도착한 스크립트부터 실행됩니다.

 

이렇게 defer와 async는 각각의 장단점을 가지고 있으며 사용 상황에 따라 적절한 옵션을 선택해야 합니다. 

만약 스크립트들이 서로 의존하고 실행 순서가 중요하다면 defer를, 

서로 독립적이고 최대한 빠르게 실행되길 원한다면 async를 사용해보세요!