스크립트 비동기 속성 async defer

async
defer
<script defer src="https://example.com/script.js"></script>

둘 다 비동기, 명시 안하면 기본 동기.

async는 비동기 즉발.

defer는 비동기지만 HTML문서 파싱 완료 후 스크립트 실행. 즉

  1. 스크립트 만나는 시점에서 즉각 동기로 스크립트 로드하는게 중요하다 → 기본
  2. 스크립트 만나는 시점에서 최대한 빨리 로드해야 하지만 DOM파싱을 멈출 필요까지는 없다 → async
  3. 스크립트 만나는 시점과 상관 없이 무조건 DOM파싱 끝난 후(가장 느리게) 실행돼야 한다 → defer

동기: 스크립트가 실행될때까지 이후 코드를 읽지 않고 만난 순서대로 우선 처리.

비동기: 스크립트 만나면 실행되지만 환경에 맞게 리소스를 사용해 이후 코드와 동시에 병렬처리.