동적 스크립트

자바스크립트를 사용하면 문서에 스크립트를 동적으로 추가할 수 있다. 이렇게 추가한 스크립트를 동적 스크립트(dynamic script)라고 부른다.

let script = document.createElement('script');
script.src = "/article/script-async-defer/long.js";
document.body.append(script); // (*)

위 예시에서 외부 스크립트는 관련 요소가 문서에 추가되자 마자((*)로 표시한 줄) 다운로드가 시작된다.

그런데 동적 스크립트는 기본적으로 ‘async’ 스크립트처럼 행동한다.

따라서 다음과 같은 특징을 갖는다.

• 동적 스크립트는 그 어떤 것도 기다리지 않는다. 그리고 그 어떤 것도 동적 스크립트를 기다리지 않는다.
• 먼저 다운로드된 스크립트가 먼저 실행된다(‘load-first’ order).

아래 예시에선 두 스크립트를 동적으로 문서에 추가한다. 그런데 script.async=false가 없었다면 이 스크립트들은 'load-first order’로 실행된다. 그럼 크기가 작은 small.js가 먼저 실행된다. 하지만 script.async=false가 있기 때문에 실행은 '문서에 추가된 순서’대로 된다.

function loadScript(src) {
  let script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.body.append(script);
}

// async=false이기 때문에 long.js가 먼저 실행됩니다.
loadScript("/article/script-async-defer/long.js");
loadScript("/article/script-async-defer/small.js");