Body의 맨 아래 스크립트를 import하는 경우
브라우저가 html을 로드하고 구문분석을 차례대로 마친 후에 스크립트를 로드하고 실행한다.
이떄 로드하는 동안 아무 일도 하지 않으므로 비효율적이다.
Head 부분에 스크립트를 넣을 경우
head부분에 스크립트를 넣으면 html을 로드하고 구문분석을 하는 도중 스크립트를 로드하고 실행한다.
속도는 빠르지만 아직 렌더되지 않은 버튼에 이벤트를 다는 시도를 해 오류를 발생시킬 수 있다.
이때 defer 가 사용된다. defer를 사용하면 html 구문 분석과 동시에 스크립트를 미리 다운받지만 스크립트가 실행되지 않아 html과 관련있는 작업 수행 시 효율적이다.
async도 마찬가지로 html 구문 분석을 진행하면서 스크립트를 미리 다운받는다. 차이점은 스크립트 다운이 완료되면 html 구문분석과는 별개로 바로 실행되어 html과 관련없는 작업을 수행할 때 쓰인다.
두 옵션은 스크립트 파일 다운로드에 관련된 것이다. 만약 스크립트 태크 안에 직접 스크립트를 넣으면 html 구문 분석 중 해당 부분의 구문분석이 완료되면 바로 실행되기 때문에 두 옵션과는 상관없다.
