async vs defer (외부 스크립트 파일 불러오기)

📔 외부 스크립트 불러오기

html에 js파일을 불러오는 방법은 아래와 같이 세가지 입니다. 

basic

이렇게 기본으로 불러오는 것은 js의 로딩이 끝날 때까지 아무것도 하지 못하게 됩니다. 

async

async의 옵션을 주게 되면 js의 로딩에 들어가더라도 html문서의 렌더링을 막지 않습니다. 하지만 만약 js파일이 여러개라면 순서에 상관없이 먼저 다운로드 되는 js파일이 먼저 실행됩니다. (순서X)

defer

defer의 옵션을 주게 되면 async와 같이 js의 로딩에서 html의 렌더링을 막지 않습니다. 하지만 모든 js 파일을 다운로드 받아도 바로 로딩되지 않고 html의 렌더링이 끝난 후 순차적으로 로딩이 됩니다.

 

defer를 쓰면 화면에 자바스크립트 실행되기 전에 페이지가 출력되는 점에 유의해야 하고,

async를 쓰면 js로딩이 뒤죽박죽 일 수 있습니다.

 

이 둘을 적절히 사용하여 js파일을 로딩해야 합니다!