async / defer

기본적으로 스크립트는 다운로드 받고 실행되는 동안 페이지 렌더링을 막는다.

async

• 스크립트가 병렬로 백그라운드에서 다운로드 된다.

• 먼저 다운로드된 스크립트가 우선적으로 실행된다(load-first order)

• 스크립트가 실행될 때 페이지 렌더링이 blocking된다.

• DOM에 직접 연관이 없거나 다른 스크립트에 의존하지 않는 스크립트를 독립적으로 실행할 때 적합하다.

• 비동기 스크립트로 DOMContentLoaded 이벤트 콜백으로 로드를 보장할 수 없다.

defer

• 스크립트가 병렬로 백그라운드에서 다운로드 된다.

• 문서 다운로드와 파싱이 완료되어 DOM이 준비된 후 스크립트가 실행된다.

• DOMContentLoaded 이벤트 발생 전에 스크립트가 실행된다.