[JavaScript] 스크립트를 HTML로 불러오는 방법

바닐라 자바스크립트를 이용한다면, script 파일을 어떤 방식으로 불러오는지가 굉장히 중요할 수 있다.

동기적 방식

1. head에 script파일 추가

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

HTML 파싱이 진행되는 중에 스크립트 태그를 만나면 파싱을 멈추고 스크립트 파일을 다운로드하고 실행합니다. 실행이 완료되면 남은 파싱이 진행됩니다.
이 방식은 HTML이 중간에 렌더링되지 않기 때문에 사용자가 웹페이지를 보기까지 시간이 오래 걸리며, 스크립트에서 선택한 DOM에 접근할 수 없는 문제가 있습니다.

2. body 끝에 script파일 추가

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

HTML 파싱이 종료된 후에 스크립트를 설치하고 실행합니다.
사용자는 웹페이지를 빨리 볼 수 있지만, 스크립트가 설치되기 전까지는 스크립트의 동작을 기대하기 어렵습니다.

비동기적 방식

3. head + async

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

HTML 파싱이 진행되는 중에 스크립트 태그를 만나면 스크립트 파일을 비동기적으로 다운로드하고 실행합니다. 실행될 때만 파싱이 일시 중단됩니다. 실행이 완료되면 남은 파싱이 진행됩니다.
동기적 방식보다는 빠를 수 있지만, HTML이 중간에 렌더링되지 않기 때문에 사용자가 웹페이지를 보기까지 시간이 오래 걸리며, 스크립트에서 선택한 DOM에 아직 접근할 수 없는 문제가 있습니다.

4. head + defer

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

HTML 파싱이 진행되는 중에 스크립트 태그를 만나면 스크립트 파일을 비동기적으로 다운로드한 후, 파싱이 완료된 후에 스크립트가 실행됩니다.
이 방식은 비동기적으로 설치되며, 동기적으로 실행되기 때문에 효율적이고 발생할 수 있는 문제가 적습니다.
이 방식이 가장 권장되는 방식입니다.