스크립트의 로딩 방법 ( 내부 & 외부 자바스크립트 / async & defer )

작성된 스크립트를 브라우저가 적절한 때에 로딩하는 것에 대해 몇가지 이슈가 있음.

HTML Document의 body가 해석되기 전인 head 부분에 로드되고 실행되는 것은 에러를 일으킬 수 있음.

 

 

해결방법 1

내부 자바 스크립트 예제

 

 : "DOMContentLoad" 이벤트 사용.

   "DOMContentLoad" 이벤트는 브라우저가 완전히 로드되고 해석될때 발생된다.

document.addEventListener("DOMContentLoaded", function() {
  ...
});

 

 

해결방법 2

외부 자바 스크립트 예제

 

 : async 속성 사용 (외부 스크립트에서만 동작)

일반적으로 HTML요소를 로딩하는 중 <scirpt>태그를 만나면 JavaScript의 내용이 모두 다운될 때까지 HTML로딩은 멈추게 되는데, 

async요소는 비동기방식으로 <script>태그에 도달했을 때 브라우저에게 HTML 요소를 멈추지 않고 다운받도록 유지시킨다.

<script src="script.js" async></script>

 

** body 태그 마지막에 script 요소를 넣는 방법은 옛날 방식.

DOMContentLoad를 사용하는 방법과 body태그 맨끝에 넣는 방법 모두 HTML DOM이 로드 되기 전까지 script의 로딩과 파싱이 완전히 차단됨.

그래서 많은 자바스크립트 코드를 다루는 대규모 사이트의 경우 사이트를 느리게 만드는 중요한 성능문제를 야기할 수 있다.

그러므로 async를 사용해야 한다!

 

---

 

async & defer

 

async 속성을 가진 외부 스크립트는 페이지 렌더링의 중단 없이 스크립트를 다운로드 하고, 스크립트가 다운로드 되자마자 실행시킨다.

async는 외부 스크립트끼리의 구체적인 실행순서는 보장하지 않고, 단지 나머지 페이지가 나타나는 동안 스크립트가 비동기 방식으로 다운로드되어 중단되지 않는다는 것만 보장한다.

그러므로 async는 각각의 스크립트가 독립적으로 서로에게 의존하지 않는 관계일 때 적절하다.

 

defer 속성은 순서대로 다운로드 한 후, 모든 스크립트와 내용이 다운로드 되었을때 실행된다.

 

 

 

 

 

*** 질문 ***

async와 defer를 혼용하여 사용하면 어떻게 될까?

 

 

---

 

 

출처

developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/What_is_JavaScript