<script> 속성의 defer 와 async

defer와 async 속성은 둘 다 스크립트를 비동기적으로 다운로드하게끔 하는 속성들이지만, 몇 가지 중요한 차이점이 있습니다.

1. 실행 시점:
   • defer: 문서의 파싱이 완료된 후, DOMContentLoaded 이벤트가 발생하기 직전에 스크립트가 실행됩니다.
   • async: 스크립트가 다운로드되면 즉시 실행됩니다. 다만, 문서의 파싱을 차단하지 않으므로 스크립트의 실행이 완료되지 않아도 페이지의 로딩은 계속됩니다.
2. 문서 파싱 차단 여부:
   • defer: 스크립트의 다운로드가 비동기적으로 이루어지지만, 실행이 차단됩니다. 따라서 파싱은 중단되지 않지만 스크립트의 실행이 완료될 때까지 기다립니다.
   • async: 스크립트의 다운로드와 실행이 모두 비동기적으로 이루어지므로, 다운로드가 진행되는 동안에도 문서의 파싱은 중단되지 않습니다.
3. 스크립트 순서:
   • defer: 여러 개의 defer 스크립트가 있다면, 순서대로 실행됩니다. 즉, 첫 번째 defer 스크립트가 다운로드되고 실행된 후, 그 다음 스크립트가 순차적으로 처리됩니다.
   • async: 여러 개의 async 스크립트가 있다면, 다운로드가 완료되는 대로 실행될 수 있습니다. 실행 순서가 보장되지 않습니다.

따라서 선택은 사용하고자 하는 동작에 따라 이루어져야 합니다. defer는 스크립트의 실행을 지연시켜 문서의 로딩이 완료된 후에 실행되게 하고, async는 스크립트의 다운로드와 실행을 비동기적으로 처리하여 문서의 로딩을 차단하지 않습니다.