JS에 defer의 의미

스크립트는 (parser blocking resource)파서차단리소스이다.
asynce, defer 모두 사용하지 않은 기본 모드로 브라우저는 문서를 파싱해 읽다가 자바스크립트를 만나면 진행하고 있었던 파싱을 멈추고 스크립트를 다운-> 파싱 -> 실행한 후 다시 문서를 파싱하게 된다.

기본모드를 사용할 경우 스크립트를 다운/파싱/실행할 때까지 문서(HTML) 파싱이 중단되어 화면 랜딩 시간이 더 소요된다.

🖍 defer의 등장

script태그에 defer속성을 붙이면 백그라운드에서 스크립트를 다운받는다.
백그라운드에서 돌기때문에 스크립트다운로드중에도 html파싱이 멈추지 않음.

🖍 defer의 특징

스크립트는 병렬적으로 다운로드되기 때문에 작은스크립트가 먼저 다운로드 완료될수 있으나, 실행은 추가된 순서대로 실행된다.

async와 defer의 공통점
스크립트를 다운로드하는 동안 문서(HTML)이 중단되지 않는다.

async와 defer의 차이점

	async	defer
실행기준	다운로드 순	정의 순
	다운로드와 동시에 평가실행	문서를 다 읽은 후 실행

async는 스크립트를 다운로드됐을 때 곧바로 평가 실행하고, defer은 문서(HTML)을 완전히 다 읽은 후에 실행한다.
async는 먼저 다운로드된 순서대로 실행하고, defer은 정의된 순서대로 실행된다.

참고사이트
https://www.tcpschool.com/html-tag-attrs/script-defer#google_vignette
https://jake-seo-dev.tistory.com/400
https://webroadcast.tistory.com/15