[자바스크립트] script의 async와 defer 속성

 

'async'와 'defer' 는 '<script>' 태그의 속성으로, 스크립트 파일의 로드와 실행을 제어하는데 사용된다. 이 두 가지 속성은 웹 페이지의 성능을 향상시키는 데 도움을 줄 수 있다.

 

 

1. async 속성 :
   • <script async src="파일경로.js"></script> 
   • 스크립트 파일이 비동기적으로 로드되며, 로드가 완료되면 즉시 실행된다.
   • HTML 파싱을 중단하지 않고 스크립트 파일을 로드하므로, 다른 리소스롸 병렬로 로드 될 수 있다.
   • 스크립트의 실행 순서가 보장되지 않는다. 여러 개의 'async' 스크립트가 있을 경우 로드 완료 순서에 따라 실행된다.
   • 주로 독립적인 스크립트 또는 분석 코드 등에 사용된다.
   • 주의) 여러 개의 'async' 스크립트가 있을 경우, 로드가 완료되는 대로 실행될 수 있으므로 순서에 주의한다.
     
     
     
2. defer 속성 :
   • <script defer src="파일경로.js"></script>
   • 스크립트 파일이 비동기적으로 로드되지만, HTML 파싱이 완료된 후에 실행된다.
     즉, 스크립트 실행은 문서의 로딩이 완료되기 직전에 발생한다.
   • 스크립트의 실행 순서가 보장된다. 여러 개의 'defer' 스크립트가 있을 경우, HTML에 포함된 순서대로 실행된다.
   • 스크립트 파일을 다운로드하는 동안 HTML 파싱이 계속 진행되므로, 다운로드 시간이 길어질 수 있다. 
     따라서 대규모 스크립트 파일이나 문서 구조를 변경하는 스크립트 등에 사용하는 것이 적합하다.
   • 주의) 여러 개의 스크립트 파일을 사용할 경우, 순서에 주의하여 정의한다.

 

 

 

 

스크립트 파일이 비동기적으로 로드되지만, HTML 파싱이 완료된 후에 실행된다. 🤔...

'defer'를 쓰는것과 안쓰는 것의 차이를 비교해 보자.

 

	<script defer>	<script>
실행 시점	스크립트는 HTML 파싱이 완료된 후 실행된다. 즉, 스크립트 실행이 페이지의 구조 및 스타일에 의존할 때 유용하다.	스크립트는 <script> 요소가 나타나는 즉시 다운로드되고, 파싱과 실행이 동시에 진행된다. 실행 순서는 다운로드 된 순서대로 결정된다.
HTML 파싱 차단	스크립트의 다운로드는 HTML 파싱을 차단하지 않는다.  따라서 스크립트 로드와 동시에 HTML 문서를 계속 파싱할 수 있다.	스크립트 다운로드 및 실행이 진행 중일 때는 HTML 파싱이 일시 중지된다.
스크립트 실행 순서	다운로드 된 순서대로 스크립트가 실행된다. 스크립트 간의 의존성이 있는 경우, 이 순서는 중요하다.	다운로드 된 순서와 관계없이 스크립트가 즉시 실행된다. 따라서 스크립트 간의 실행 순서를 보장할 수 없다.
의존성 관리	스크립트 간의 의존성을 관리하기 쉽다. 스크립트들은 다운로드 및 실행을 기다리는 동안 페이지의 기타 자원들이 모두 로드되도록 보장된다.	스크립트의 다운로드 및 실행은 즉시 진행되므로, 의존하는 자원들이 모두 로드되지 않은 상태에서 실행 될 수 있다.

 

👉 따라서, 'defer'를 사용하면 스크립트의 실행을 HTML 파싱이 완료된 후로 연기하고, 스크립트 간의 의존성을 보다 쉽게 관리할 수 있다. 실행 순서와 의존성이 중요한 경우에 특히 유용하다.

반면에, 사용하지 않으면 스크립트가 즉시 다운로드되고 실행되며, 의존성과 실행 순서에 대한 제어가 덜한 상태가 된다.

 

 

 

 

 

 

---

 

 

 

 

 

 

 

'async'와 'defer'는 스크립트 파일의 로드와 실행 시점을 조절하여 페이지의 렌더링 속도를 향상시키는 데 도움을 준다.

 

'async'는 스크립트 파일의 다운로드와 실행을 동시에 처리하며, 'defer'는 스크립트 파일의 다운로드는 비동기적으로 처리하고 실행은 HTML 파싱이 완료된 후에 처리한다.

 

주의할 점은 스크립트 파일에 'async'나 'defer' 속성을 사용할 때는 전역 범위의 변수에 의존하지 않는 것이 좋다. 이러한 변수에 의존하는 스크립트의 실행 순서가 보장되지 않으므로, 의존성을 해결하기 위해 추가 조치가 필요할 수 있다.

 

스크립트의 실행 순서와 의존성에 따라 적절한 속성을 선택해야 한다.