javascript <script>태그의 defer와 async

html에 외부 script 파일을 불러올 때

head 태그 안에 스크립트 태그를 작성하고 아무 속성을 지정해주지 않으면 브라우저는

HTML파일을 먼저 다운 -> 구문을 분석하고

분석을 중간에 멈춘 후 script파일이 다운, 실행 이후 마저 HTML 구분을 분석한다

 

이때 스크립트 파일에서 요소를 조회하는 것과 같이 HTML에 의존하는 부분이 많다면

동작에 문제가 발생할 수 있다

 

이에 대한 해결책으로 script를 body 태그 마지막부분에 넣게되면

브라우저는 HTML파일을 먼저 다운 -> 구문을 분석하고

위 과정이 모두 완료된 후에 script파일을 다운, 실행하기 때문에 손해가 발생할 수 있다.

 

이럴 때 사용하는 옵션이 defer와 async이다.

<script src="" defer> </script> 와 같이 시작태그 마지막부분에 작성해주면 된다

 

defer 속성을 추가하면

브라우저는 HTML파일을 먼저 다운 -> 구문을 분석

위 작업을 하면서 script 파일을 다운하게된다.

이후 HTML 구문 분석이 완료되면 그 다음 다운한 script파일을 실행한다.

(html의존하는 script일 경우 가장 이상적)

 

async 속성을 추가하면

브라우저는 HTML파일을 다운, 분석하다가 script파일 다운, 실행을 동시에 진행한다 (병렬적)

혹시나 위와 같이 HTML에 의존하는 script파일이 있다면 오류가 발생할 수 있겠지만

그렇지 않다면 시간적으로 굉장히 이득을 볼 수 있다.

 

-- 위와 같다면 상황에 따른 설정값을 무조건 넣어주는 것이 좋을것으로 보이는데

아무 값을 안넣어주는 경우는 어떤게 있을지 확인해봐야겠다.