[html] script 태그는 어디에 위치해야 할까

Root of the discussion 1

브라우저가 script 태그를 만나면 DOM parsing 을 멈추고 script 소스를 다운로드 받는다.
그럼 UX 가 아주 안좋아진다. 느리게 로딩되기 때문에.
script 를 어떻게 하면 효율적으로 다운받을 수 있을까?

---

1. body tag 뒤에 둔다.

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

장점

• DOM parsing 이 영향받지 않는다.

단점

• DOM parsing 이 끝날 때 까지 script 를 받아볼 수 없다. parsing 이 오래 걸리는 무거운 사이트일 수록, 불리하다.

2. head 태그 안에 두는 대신, defer,async 변수를 쓴다.

1) async

    <script src="path/to/script1.js" async></script>

특징

• 비동기적으로 script 파일을 다운로드 받는다.
• 각 파일이 비동기적으로 다운로드 되자 마자, 실행된다.
• 브라우저의 활동을 막지 않는다.

2) defer

    <script src="path/to/script1.js" defer></script>
    <script src="path/to/script2.js" defer></script>

특징

• defer 를 가진 script들은 배치된 순서대로 실행된다.
• 전체 document가 다운로드 된 이후에 실행을 시작한다.
• 브라우저의 활동을 막지 않는다.

---

References

[1] Where should I put script tags in HTML markup? stack overflow
[2] script 태그는 어디에 위치 해야 할까?
[3] Remove Render-Blocking JavaScript - Pagespeed Insights