[Javascript] <script>의 실행 순서를 결정하는 속성 aysnc와 defer

 

 

카페24로 일하다 보면 다양하게 스크립트 태그를 적용해야 하는 경우가 있다.

나의 경우는 전역으로 뿌려줘야 하는 함수 등은 common.js로 layout 모듈에 적용을 해두었고

개별 페이지에 적용해야 하는 스크립트는 별도로 <script src="경로"></script>로 import를 해주는데

카페24는 나름대로 노코딩 툴이기 때문에 <!--@import(경로)-->라는 카페24만의 문법이 존재한다.

카페24가 기본적으로 저 문법으로 스크립트를 넣고 있는데, 이 스크립트들의 순서가 꼬이게 되면

원하는 기능이 제대로 작동이 안 되는 경우가 있다.

 

특히 swiperJS와 같이 외부 스크립트 라이브러리를 불러오는 경우...!

DOM은 DOM대로 불러오고 내가 만든 함수는 함수대로 적용되는데 갑자기 스와이퍼 적용이 안되는 경우가 있다.

그래서 가끔은 html 내에 <script></script>를 직접 넣어서 스크립트 처리를 하고

나머지는 import 문법을 쓰거나 경로를 넣어주는데 

스크립트에 속성으로 로딩 시점을 조정할 수 있다고 한다.

 

*카페24 특성 상 서버에서 변수가 불러들어와진 후에 스크립트를 실행하는 것이 안정적인데 이 속성을 이용하면 뭔하는 동작을 편하게 구현할 수 있을 것 같다. 하지만 카페24는 그렇게 호락호락 하지 않겠지...

 

 

 

 

---

 

<script>의 실행 순서를 결정하는 속성 aysnc와 defer

 

 

<script async src="경로"></script>

 

- async(Asynchronous) 의 뜻대로 HTML을 받아오는 도중 스크립트가 '비동기'적으로 실행된다.

- DOM이 로드순서에 상관없이 실행되며 스크립트끼리도 실행 순서는 보장되지 않는다.

- 로드 된 스크립트가 먼저 실행되며 이를 load-first order 라고 한다.

- 다만 async 속성이 있는 스크립트가 실행되는 중에는 HTML파싱이 멈추게 된다.

- async가 존재하면 true로 동작하고 없으면 false 상태가 된다.

 

- DOM과는 상관 없는 애널리틱스 태그 등을 삽입할 때 사용한다.

 

 

<script defer src="경로"></script>

 

- 백그라운드에서 다운로드 된다.

- 문서 상의 순서를 따라 실행되기 때문에 태그 추가 전의 DOM을 다 로딩되고 나서 순차적으로 실행된다. 

- 따라서 스크립트 평가가 끝나기 전까지는 DOMContentLoaded 이벤트를 막는다.

- async처럼 존재하면 true로 동작하고 없으면 false이다.

- defer 또한 실행되는 도중에는 HTML 파싱이 멈춘다.

- src 속성이 있는 경우(경로 지정)에만 동작하며 인라인 스크립트에서는 적용되지 않는다.

 

- module을 붙인 모듈 스크립트는 기본적으로 지연 평가하기 때문에 defer를 넣어도 아무런 변화가 없다.

 

참고

Jake Seo님의 블로그

MDN