defer와 async 동작 특성과 차이점 및 상황별 사용 방법

JavaScript는 브라우저에서 동적으로 HTML, CSS, 및 다른 리소스를 처리합니다. 이때, 웹 페이지 로딩 속도와 성능 최적화를 위해 defer와 async 속성을 사용해 JavaScript 파일을 로드할 수 있습니다. 이 글에서는 defer와 async의 동작 원리, 차이점, 그리고 상황별 사용 방법에 대해 자세히 알아보겠습니다.

 

1. 지원 브라우저

• IE: defer 기본 지원하며 async은 10버전 이상부터 지원
• Firefox: 3.6 버전 이상 defer, async 지원
• chrome: 8버전 이상 defer, async 지원
• safari: 5버전 이상 defer, async 지원
• ios safari: 5.1 버전부터 defer, async 지원
• android safari: 3 버전부터 defer, async 지원

 

2. defer와 async의 기본 동작

JavaScript 파일은 기본적으로 HTML 파싱을 차단합니다. 스크립트를 읽고 실행하는 동안 브라우저는 HTML을 파싱하는 과정을 멈추고, 스크립트가 모두 로드되고 실행된 후에야 HTML 파싱을 다시 시작합니다. 이는 웹 페이지 로딩을 지연시키는 원인이 될 수 있습니다. defer와 async 속성은 이러한 문제를 해결하기 위해 스크립트의 로드 및 실행 방식을 제어합니다.

1.1 defer 동작 방식

비동기적으로 파일을 다운로드합니다. 즉, HTML 파싱과 동시에 스크립트 파일을 다운로드합니다.

HTML 파싱이 완료된 후 스크립트를 실행합니다. HTML 문서의 DOMContentLoaded 이벤트가 발생한 후에야 실행됩니다.

스크립트 간의 실행 순서는 <script> 태그가 HTML에 배치된 순서를 따릅니다.

 

1.2 async 동작 방식

async 속성 역시 비동기적으로 스크립트를 다운로드합니다.

다운로드가 완료되면, 즉시 실행되며, HTML 파싱은 스크립트 실행을 위해 중단될 수 있습니다.

스크립트 간의 실행 순서는 보장되지 않습니다. 먼저 다운로드된 스크립트가 먼저 실행됩니다.

 

2. defer와 async의 차이점

특징	defer	async
다운로드 방식	비동기적 (HTML 파싱과 동시에 다운로드)	비동기적 (HTML 파싱과 동시에 다운로드)
실행 시점	HTML 파싱 완료 후 실행	다운로드 완료 즉시 실행 (HTML 파싱이 중단 될 수 있음)
스트립트 실행순서	HTML 문서의 위치 순서대로	다운로드 완료된 순서대로 실행
페이지 로딩 중단	HTML 파싱이 완료될 때까지 중단되지 않음	스크립트 실행 시점에서 HTML 파싱이 중단될 수 있음

 

 

3. 언제 defer와 async를 사용할까?

3.1 defer 사용 시점

defer는 페이지의 구조적 중요 요소를 모두 파싱한 후 스크립트가 실행되어야 할 때 적합합니다. 특히 페이지 하단에서 실행되는 스크립트들이나, DOM이 완전히 로드된 후에 실행되는 스크립트에 주로 사용됩니다.

 

사용 예시

• 스크립트가 DOM을 조작하거나 HTML 요소와 상호작용할 필요가 있을 때.
• 여러 개의 스크립트가 순차적으로 실행되어야 할 때. 

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

이 경우, script1.js와 script2.js는 HTML 파싱이 완료된 후 차례대로 실행됩니다.

 

3.2 async 사용 시점

async는 스크립트가 다른 스크립트나 DOM에 의존하지 않고 독립적으로 실행될 수 있을 때 적합합니다. 페이지의 콘텐츠와 별개로 작동하는 추적 스크립트, 광고 스크립트 또는 분석 도구 등에 사용됩니다.

 

사용 예시

• 스크립트가 다른 스크립트에 의존하지 않고 즉시 실행 가능할 때.
• 성능 최적화를 위해 특정 스크립트의 실행을 서둘러야 할 때. 

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

이 경우, 두 스크립트는 서로 간에 순서를 보장하지 않으며, 먼저 다운로드된 스크립트가 먼저 실행됩니다. 

 

4. defer와 async를 사용하지 않는 경우의 동작

스크립트에 defer나 async 속성을 추가하지 않으면, 브라우저는 기본적으로 HTML 파싱을 차단합니다. 스크립트를 만나면 해당 파일을 다운로드하고 실행한 후에야 HTML 파싱을 재개합니다. 이로 인해 웹 페이지 로딩 속도가 지연될 수 있으므로, 성능 최적화를 위해 defer와 async 속성을 사용하는 것이 좋습니다. 

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

위의 예시는 HTML 파싱이 중단되고 스크립트가 로드된 후에 다시 HTML 파싱이 이어집니다.

 

 

이상입니다.

[다른글]

https://www.ihee.com/774

JavaScript로 태그 안의 내용 가져오기와 변경하기