JavaScript defer & async

html 파일에서 스크립트의 실행 순서는 위에서부터 읽어온다.

그렇기 때문에 대부분의 스크립트 파일을 body 제일 마지막에 넣어주는 방식으로 처리한다.

<html>
  <head> 
    // ...
  </head>
  <body>
    // ...
    <script src="..."/>
    <script>
      // ...
    </script>
  </body>

이렇게 사용하는 이유는 script 태그에 있는 코드가 html 코드에 영향을 받아서 실행되기 때문에

먼저 script가 로드되고 html 코드가 불러와지면 오류가 발생할 수 있다.

<head>
  <script>
    const ele = document.querySelector(".test");
  </script>
</head>
<body>
  <div class="test"></div>
</body>

head에 있는 querySelector가 실행되는 시점에는 div.test가 로드되지 않았기 때문에 아무것도 불러오지 못한다.

그런 상태에서 ele 관련 속성을 사용하면 오류가 발생하는 것이다.

하지만 script 태그 내부에서 적어주는 방식이 아닌 파일을 가지고 오거나 외부 플러그인을 가지고 오는 경우

head에 작성해도 문제가 없이 불러올 수 있다.

Script를 제일 마지막에 호출해주는 명령어이다.

<head>
  <script defer src="..." />
</head>
<body>
  <div />
</body>

defer 옵션을 주면 백그라운드에서 JavaScript가 로딩되고 html 코드가 전부 로드가 끝나면 JavaScript가 로드된다.

html의 로드가 보장되므로 script가 html 요소가 없어서 오류가 발생할 일은 없어진다.

html과 관련있는 작업을 진행할 때 defer 명령어를 사용하면 실행 순서가 보장된다.

실행 순서는 보장되지 않는 옵션이다.

<head>
  <script async src="..." />
</head>
<body>
  <div />
</body>

JavaScript가 비동기로 로드된다. 하지만 html 코드가 전부 로드되기 전에 script의 로딩이 끝난다면 바로 해당

script가 로드된다.

그러므로 defer와는 다르게 실행 순서는 보장되지 않는다.

html과 관련없는 JavaScript를 사용할 때 주로 사용되는 방식이다.

티스토리툴바