script 태그의 위치는 어디가 가장 좋을까?

script 태그의 위치는 어디가 가장 좋을까?

 이 질문은 Inside look at modern web browser (part 3) 글을 보는 도중에 떠오른 질문이다.

 

 위 글에 의하면, <script> 태그가 파싱될 때에는 HTML의 구문 분석을 중지하고 javascript 코드를 실행한다고 한다.

만약 복잡한 애니메이션이나 실행 시간이 오래 걸리는 API 통신 코드가 담긴 script 태그가 head 태그 안에 있다면, HTML이 화면에 그려지는 것은 굉장히 지연될지도 모른다. 반면에 body 태그 최하단에 있다면, HTML이 이미 화면에 그려진 상태이기 때문에 사용자 측에서는 이상 없이 보일 것이다.

 

 따라서, script 태그가 위치하기에 가장 좋은 자리는 body 태그 최하단이다. DOM 트리 생성 중 끊길 일도 없고, 사용자에게 신속하게 화면을 보여줄 수 있기 때문이다.

 

---

  하지만, script 파일이 매우매우매우 무겁다면 어떨까? 사용자는 버튼이 눌리지 않는 화면 속에서 기다려야만 한다.. (사실 네트워크 환경이 좋은 우리나라는 별로 상관없을 것 같긴 하지만)

 좋은 방법이 없을까 찾아보던 도중, defer, async 스크립트 글을 보았다. async와 defer은 각각 script 태그의 속성으로 HTML 파싱과 별개로 스크립트 파일을 다운로드 받는다.

 

• defer은 백그라운드에서 스크립트를 다운받고, HTML 파싱이 끝나면 스크립트를 실행한다.
• async는 마찬가지로 백그라운드에서 다운받는다. 하지만, DOM과 async 스크립트는 서로 기다려주지 않고 독립적으로 동작한다. (순서가 제각각이 된다)

defer, async 스크립트 글의 마지막 부분이다.

 실무에선 defer를 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용합니다. 
async는 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우에 적용합니다.