다음 scipt 태그의 차이점을 알아보았습니다
먼저 요약해 보자면
DOM을 따라 반드시 순서대로 실행되어야 한다면 script만
DOM이나 다른 스크립트에 의존성이 없고, 실행 순서가 중요하지 않은 경우라면 async
DOM이나 다른 스크립트에 의존성이 있고, 실행 순서가 중요한 경우라면 defer
브라우저는 HTML파일을 읽어온 후 위에서 부터 한줄씩 해석을 시작하다가 스크립트 파일을 만나면 그 스크립트 파일을 해석하기 전까지 HTML렌더를 멈춘다
따라서
<script>
//에러발생console.log(document.getElementById('hello').innerHTML);
</script>
<div id="hello">안녕하세요</div>
<script>
// '안녕하세요'출력
console.log(document.getElementById('hello').innerHTML);
</script>요이때 첫번째 script 태그는 hello 라는 id를 가진 div 태그를 만나기 전이므로 id를 찾을 수 없어 error 가 발생한다
이를 해결하기 위해 body 태그가 끝나는 부분에 scipt 태그를 넣는 방식으로 해결 하기도 하지만 이는 완벽한 해결책은 아니다.
만약 사용자가 스크립트가 해석되는 도중에 버튼클릭이나 텍스트 입력등의 event를 발생시킬경우 완성된것처럼 보이나 제대로 동작하지는 않을 것이다.
따라서 이를 해결하기 위한 방법으로는 async와 defer를 사용하는것인데
async
async는 다음과 같은 순서의 script로드 순서를 가진다
html문서 시작 → script파일을 동시에 다운로드/실행 → body태그에 있는 html 실행 → 끝
위와 같은 순서이다
이때 script 파일이 여러개 있을 경우 먼저 다운로드 된 script 파일을 먼저 실행하게 된다
따라서 script 파일이 서로 연관성이 있는 경우 하나의 script만 실행 후 문제가 발생할 수있다(즉, 실행 순서가 보장되지 않는다)
따라서 async 는 다른 script에 의존적이지 않은 script들을 독립적으로 실행 할 때 효과 적이다
defer
defer는 다음과 같은 순서의 script로드 순서를 가진다
html문서 시작 → body태그에 있는 html 실행→ 스크립트 다운로드/실행 → 끝
위와 같은 순서이다
script 실행이 페이지 구성이 모두 끝난 후에 실행된다 또한 여러script 파일중 먼저 다운로드가 되더라도 실행은 항상 선언한 순서대로 실행된다 따라서 가장 범용적으로 사용할 수 있는 속성이다
