HTML - [<script> vs <script async> vs <script defer>]

웹 브라우저에서 돌아가는 스크립트들은 대부분 HTML보다 무겁다. 용량이 커서 다운로드 하는데 오랜시간이 걸리며 실행하는 것 또한 마찬가지이다. 브라우저 렌더링 과정에서 HTML 문서를 파싱하는 과정에서 스크립트를 만나면 HTML 파싱을 중지하고 스크립트를 실행한다. 이러한 과정에서 두가지의 중요한 이슈가 생겨난다.

 

1. 스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없다. 파싱되지 않은 HTML문서 이기 때문이다. 
2. 페이지의 위쪽에 용량이 큰 스크립트가 있는 경우 사용자 입장에서는 스크립트를 로드 하느라 시간이 걸리는 동안 스크립트 아래에 있는 페이지를 볼 수 없게 된다.

이러한 이슈를 해결할 방법으로서 스크립트 속성이 있다. 아래와 같은 속성은 스크립트의 실행 순서를 다르게 하여 위의 이슈들을 해결 할수 있다.

 

• <script> : HTML 파싱이 중단되고 즉시 스크립트가 로드되며 로드된 스크립트가 로드되고 HTML 파싱이 재개된다. 스크립트 실행 순서는 문서에 추가된 순이다.
• <script async> : HTML 파싱과 병렬적으로 로드되는데, 스크립트를 실행할 때는 파싱이 중지된다. 구글 애널리틱스와 같이 다른 스크립트가 의존하지 않는 독자적인 스크립트를 로드할 때 적합하다. 스크립트 실행 순서는 스크립트의 로드가 먼저 끝난 가벼운 스크립트 순이다. 이렇게 다른 스크립트들에 의존성이 없는 독립적 기능의 스크립트일 경우 적용한다.
• <script defer> : HTML 파싱과 병렬적으로 로드되는데, HTML파싱이 모두 끝난 후에야 스크립트가 실행된다.  이 경우 HTML 파싱이 끝날 때 발생하는 이벤트인 DOMContentLoaded 가 발생하기 전에 스크립트를 실행한다. 이때에는 1번 이슈를 극복하고 2번 이슈에서 문제가 발생한다. 그래픽 관련 컴포넌트 스크립트의 실행이 되기 전의 페이지를 사용자가 보게 됩니다. 이경우 반드시 로딩 인디케이터를 사용하고 관련 기능의 버튼들도 모두 disable 처리를 해줘야한다. 그래야 사용자가 현재 어떤 것을 사용 할 수 있고 없는지 구분할 수 있게해야한다. 스크립트 실행 순서는 문서에 추가된 순이다.

아래 그림을 보면 직관적인 이해가 가능하다.

 

---

참고

 

github.com/baeharam/Must-Know-About-Frontend/blob/master/Notes/html/script-tag-type.md

baeharam/Must-Know-About-Frontend

developer.mozilla.org/ko/docs/Web/HTML/Element/script

: 스크립트 요소 - HTML: Hypertext Markup Language | MDN</p> <p class="og-desc">이 요소는 전역 특성을 포함합니다. async 일반 스크립트에 async 속성이 존재하면 HTML 구문 분석 중에도 스크립트를 가져오며, 사용 가능해지는 즉시 평가를 수행합니다. 모듈 스크립트에 async 속</p> <p class="og-host">developer.mozilla.org</p> </div> </a>

ko.javascript.info/script-async-defer

defer, async 스크립트