자바스크립트 파일을 브라우저에 한번에 로딩하면 어떻게 될까?

자바스크립트 파일을 브라우저에 한 번에 로딩하면 어떻게 될까?

 

답은 위의 짤이 잘 설명해주는 듯 하다. 

 

정답은 "자바스크립트를 읽어들이느라 자바스크립트 아래의 HTML 파싱을 중단하게 되어 DOM구성을 차단당한다".

 

이렇게 되면 두 가지 문제가 발생한다. 

 

1. 유저입장에서는 웹사이트가 반응을 하지 않으니 에러가 난 줄 알고 이탈을 한다. 

2. 만약 자바스크립트가 아직 구성되지 않은 DOM을 이용해야 하는 경우이거나 아직 파싱 되지 않은 자바스크립트 코드에 의존적이라면 에러가 발생한다.

 

하지만...! 이런 상황을 해결하는데 도움이 되는 async와 defer 속성이 있다!

 

async

<script async></script>

위처럼 async 속성을 부여하면 스크립트를 읽어들이는읽어 들이는 동안 DOM 구성을 멈추지 않는다. 그리고 스크립트를 읽어 들이는 일이 끝나면 DOM 구성을 멈추고 스크립트를 실행한다.

 

언듯 보면 완벽한 해결방법처럼 보이나 사실은 async 속성도 완벽한 해결방법은 아니다. 

 

왜냐하면 언제 스크립트를 읽어들이는 작업이 종료될지 모르기 때문이다. 만약 스크립트를 읽어 들이는 작업이 필요로 하는 DOM 구성 이전에 완료된다면 문제가 발생할 것이다. 

 

defer

<script defer></script>

async와 달리 defer 속성은 실행 자체를 맨뒤로 미루게 된다. defer라는 의미가 보여주듯이 읽어들이는 작업은 async와 같지만 실행 자체는 미루어 버리는 것이다. 

 

따라서 DOM구성을 필요로하거나 스크립트 간 의존성이 큰 경우에는 defer 속성을 이용하는 게 바람직하다.