defer, async

defer

<p>...스크립트 앞 콘텐츠...</p>

<script src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<!-- 스크립트 다운로드 및 실행이 끝나기 전까지 아래 내용이 보이지 않습니다. -->
<p>...스크립트 뒤 콘텐츠...</p>

본문내에 있는 스크립트는 DOM트리구성을 멈추게한다.

<p>...스크립트 앞 콘텐츠...</p>

<script defer src="https://javascript.info/article/script-async-defer/long.js?speed=1"></script>

<!-- 바로 볼 수 있네요! -->
<p>...스크립트 뒤 콘텐츠...</p>

defer지연스크립트는 DOMContentLoaded이벤트 발생 바로전에 실행된다.

defer스크립트에 DOM구성과 관련없는 스크립트를 넣을 필요가 없다.

defer스크립트가 여러개일 경우 선언한 순서대로 실행된다.

async

async스크립트는 비동기로 로드되고 실행되며 페이지와 독립적으로 동작한다.
(async스크립트가 로딩후 실행중에는 HTML파싱이 멈춘다)

async스크립트가 여러개일 경우 로드되는 순서대로 실행된다.

<p>...스크립트 앞 콘텐츠...</p>

<script>
  document.addEventListener('DOMContentLoaded', () => alert("DOM이 준비 되었습니다!"));
</script>

<script async src="https://javascript.info/article/script-async-defer/long.js"></script>
<script async src="https://javascript.info/article/script-async-defer/small.js"></script>

<p>...스크립트 뒤 콘텐츠...</p>

async스크립트는 방문자 수 카운터나 광고관련 스크립트처럼 각각 독립적인 역할을 곳에 사용한다.

동적 스크립트

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

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

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");