script와 html

아래 예시와 함께 script 파일을 효과적으로 불러오는 방법에 대해 알아보겠습니다.

첫번째 예시

head 태그 안에 삽입

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <button id="btn">버튼</button>
  </body>
</html>

➡️ html 파싱은 순차적으로 진행되기 때문에 DOM이 생성되기 전에 script가 실행되어 #btn을 불러올 수 없어 null이 발생합니다.

두번째 예시

body 태그의 마지막에 삽입

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <button id="btn">버튼</button>
    <script src="script.js"></script>
  </body>
</html>

let btn = document.querySelector('#btn');
console.log('btn : ', btn); 
// <button id="btn">버튼</button>

세번째 예시

window.onload 함수
- HTML파싱, DOM생성 그리고 외부 콘텐츠(images, script, css, etc)가 로드된 후 발생하는 이벤트

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      window.onload = function () {
        let btn = document.querySelector('#btn');
        btn.addEventListener('click', function () {
          alert('Hello World');
        });
      };
    </script>
  </head>
  <body>
    <button id="btn">버튼</button>
  </body>
</html>

➡️ DOM이 다 생성된 후 함수가 실행되기 때문에 함수가 제대로 작동합니다!

하지만 onload 함수는 외부 콘텐츠까지 로드된 후에 발생하기 때문에 이미지가 수 만장(?) 불러와야 할 경우에는 효율적이지 못합니다.

이런 상황에 쓸 수 있는 함수는 DOMContentLoaded 입니다.

DOMContentLoaded 함수
- HTML파싱 DOM생성 후 발생하는 이벤트

<!DOCTYPE html>
<html lang="en">
  <head>
    <script>
      document.addEventListener('DOMContentLoaded', function() {
        let btn = document.querySelector('#btn');
        btn.addEventListener('click', function() {
          alert('Hello World');
        });
      });
    </script>
  </head>
  <body>
    <button id="btn">버튼</button>
  </body>
</html>

➡️ window.onload와 DOMContentLoaded 실행 순서를 비교해보면

DOMContentLoaded ⇒ window.onload 순으로 발생합니다.

네번째 예시

defer, async

🔥여기서 잠깐!

script 태그를 head 태그 위에다가 작성할 경우, HTML parsing을 하다가 script 태그를 만나면 잠시 멈추고 script를 불러오고(fetch), 실행(execution)한 다음 다시 HTML parsing이 진행됩니다. (동기 방식)

그래서 DOM이 제대로 불러와지지 않은 상태에서 script가 실행되어 오류가 났었던 겁니다~

body 태그 최하단에 작성하면 HTML parsing이 모두 완료된 후에 script를 불러오고 실행하기 때문에 DOM 요소를 못 찾는 불상사를 피할 수 있게 됩니다.

여기서 좀 더 효율적으로 불러오려면 어떻게 하는 것이 좋을까요?

HTML parsing을 할 때 같이 script를 불러오고, 완료된 후 실행하는 것이 좋겠죠?

이러한 문제를 해결하기 위해 html5에서 defer와 async가 생겨났습니다.

defer
- HTML파싱과 함께 비동기로 JavaScript 파일 로드
  - HTML 파싱이 완료된 후, JavaScript 코드를 실행

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="script.js" defer></script>
  </head>
  <body>
    <button id="btn">버튼</button>
  </body>
</html>

async
- HTML파싱과 함께 비동기로 JavaScript 파일 로드
  - HTML파싱이 완료되지 않았더라도, 먼저 로딩되는 JavaScript파일부터 실행 시작
- JavaScript 파일을 실행할 때는 HTML 파싱 중단

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="script.js" async></script>
  </head>
  <body>
    <button id="btn">버튼</button>
  </body>
</html>

➡️ defer, async는 parsing 도중에 script를 만나도 멈추지 않고 동시에 진행됩니다.

(이것이 비동기 핵심!)

🔥하지만!

defer는 동시에 진행하고 script를 parsing보다 먼저 완료되더라도 기다렸다가 script가 실행되는 반면 async는 script fetch가 완료되는대로 바로 실행되기 때문에 타이밍이 안맞을 수 있습니다.

그럼 defer만 쓰면 되지 async는 어느 때에 필요할까요?

간단히 생각해보면 DOM과 상호작용하지 않는 경우에는 parsing이 완료될 때 까지 기다리는 것이 비효율 적일 것 같습니다.

이 밖에 예시는 아래와 같습니다~

독립적인 스크립트 로드

스크립트가 DOM 구조에 의존하지 않는 경우
- 예) 데이터 분석 툴, 광고 스크립트, 소셜 미디어 위젯 등
```
<script async src="https://www.google-analytics.com/analytics.js"></script>
```

네트워크 병렬 로드

여러 스크립트를 비동기적으로 로드하여 페이지 로드 시간을 최적화
- 예) 외부 라이브러리

로드 속도 최적화

DOM이 필요하지 않은 작업
- 예) 이벤트 추적, 초기화 등

저작자표시 비영리 변경금지 (새창열림)

'🎨 Frontend > JavaScript' 카테고리의 다른 글

JavaScript/HTML - DOM이란? (0)	2025.01.08
🍦Vanilla JS (12) ES5, ES6 (0)	2023.04.08
🍦Vanilla JS (11) HTTP 비동기 통신 (2)	2023.04.08
🍦Vanilla JS (10) JSON (0)	2023.04.05
🍦Vanilla JS (9) 정규 표현식 (0)	2023.04.05