HTML에 JS를 추가하는 방법

1. head에 추가

• 스크립트를 먼저 다운받고 실행하기에 중간에 DOM 생성을 멈춘다.
• Js파일의 사이즈가 크고 인터넷 속도가 느리면 웹사이트 로딩까지 시간이 오래 걸린다.

2. body 밑에 추가

• 사용자가 html은 빨리 볼 수 있으나 JS를 사용하여 데이터를 받아오거나 이벤트를 줬을때 정상적으로 작동하지 않을 수도 있다.

3. head 안에 async 추가

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

• 병렬로 함께 다운받다가 JS 다운을 다 받으면 html 파싱을 멈추고 js를 실행한 뒤 다시 html 파싱한다.
• html이 완성되기 전에 실행되기 때문에 html에서 querySelector 같은 것을 사용시 위험하다.
• 비동기 스크립트는 서로를 기다려주지 않기에 다운이 먼저되면 먼저 실행된다. ⇒ 'load first order'
• 비동기 스크립트는 방문자 수 카운터나 광고 관련 스크립트처럼 각각 독립적인 역할을 하는 스크립트 혹은 실행 순서가 중요하지 않은 경우에 주로 사용된다.

4. head안에 defer 추가 🌟🎖

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

• HTML 파싱을 하다가 병렬적으로 JS를 다운받고, HTML 파싱이 끝나면 JS를 실행한다.
• 문서에 추가된 js 순서대로 실행돼서 js의 선행관계도 지킬 수 있다.
• 가장 안전하고 좋은 방법이다. 단, 스크립트가 실행되기 전에 페이지가 화면에 출력되는 점을 유의해야 하며 지연 스크립트가 영향을 주는 영역에는 반드시 '로딩 인디케이터'가 있어야 한다. 관련 버튼 사용 불가(disabled) 처리도 해줘야 한다.
• 'DOMContentLoaded' 보다 먼저 실행된다.
  • DOMContentLoaded는 document만 완료되면 실행
  • load는 css나 이미지 같은 것들을 다 받은 후에 이벤트 실행.
    ⇒ 순서는 JS → DOMContentLoaded → load
    

출처

• 모던 자바스크립트 https://ko.javascript.info/script-async-defer