본문 바로가기

카테고리 없음

<script> defer vs async

철제 담장 위의 참새. Unsplash 에 Nastya Kvokka 님이 올림.

일단 기본

  • defer, async, type=”module” 이 없거나, inline script인 경우
    script 태그를 만나면 즉시 HTML 파싱을 멈추고 스크립트부터 fetch 후 실행까지 함

async

  • fetch 시작 후 완료를 기다리지 않고 남은 html 파싱
  • fetch 완료되면 바로 자바스크립트 실행
  • src 태그가 없다면 아무 효과 없음

defer

  • fetch 시작 후 완료를 기다리지 않고 남은 html 파싱
  • document parse 이후 스크립트를 끝까지 실행하고 DOMContentLoaded 이벤트를 터뜨림
  • module script는 이게 기본값
  • defer 여러 개를 썼다면 문서에 나왔던 순서대로 실행함
  • async 와 defer 를 같이 썼다면 defer 는 무효