async VS defer

한서희·2021년 12월 2일

script를 head 안에 포함

<!DOCTYPE html>
<html lang="en">
  <head>
  	<title>Document</title>
    <script src="main.js"></script>
  </head>
  <body></body>
</html>

👉🏻 js파일 사이즈가 크면 사용자가 웹사이트를 볼 때까지 많은 시간이 소요됨

body안 끝 부분에 script 추가

<!DOCTYPE html>
<html lang="en">
  <head>
  	<title>Document</title>
  </head>
  <body>
    <div></div>
  	<script src="main.js"></script>
  </body>
</html>

👉🏻 페이지가 준비 된 다음 스크립트를 서버에서 받아온 뒤 실행
👉🏻 사용자가 기본적인 html의 컨텐츠를 빠르게 볼 수 있으나 자바스크립트를 받아와 실행하기까지의 시간이 오래걸림

head 안에 script + async

<!DOCTYPE html>
<html lang="en">
  <head>
  	<title>Document</title>
    <script async src="main.js"></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

👉🏻 병렬로 js파일을 다운
👉🏻 body안 끝부분에 script를 추가하는 것 보다 다운받는 시간을 절약 할 수 있다.
👉🏻 html이 parsing되기 전에 자바스크립트가 실행되기 때문에 html의 원하는 요소가 아직 정의되지 않을 수 있다.
👉🏻 자바스크립트를 실행하기 위해 html parsing을 언제든지 멈출수 있기 때문에 사용자가 페이지를 보는데 시간이 걸릴 수 있다.

✨ async를 이용해 다수의 스크립트를 다운받게 되면 먼저 다운로드 되는것을 실행한다. 정의된 스크립트 순서에 상관없이 다운로드 된 순서로 실행된다. 작성한 자바스크립트가 순서의 의존적이라면 비추!

head 안에 script+ defer

🌟 recommend it!

<!DOCTYPE html>
<html lang="en">
  <head>
  	<title>Document</title>
    <script defer src="main.js"></script>
  </head>
  <body>
    <div></div>
  </body>
</html>

👉🏻 js파일을 다운 받자 명령만 시켜 놓고 html parsing을 끝까지 한다.
👉🏻 html을 parsing하는 동안 필요한 자바스크립트를 다운받아 사용자에게 페이지를 보여준 뒤 바로 이어서 자바스크립트를 실행.

✨ defer을 이용해 다수의 스크립트를 다운받게 되면 html을 parsing하는동안 필요한 자바스크립트를 다운받아 놓은 다음에 순서대로 실행하기 때문에 원하는 순서대로 실행 가능!

🙌🏻 'use strict'
순수 바닐라 자바스크립트를 사용할 때 'use strict'를 맨 위에 선언하면 조금 더 상식적인 범위 안에서 자바스크립트를 이용할 수 있다.

한서희

안녕하세요, 개발자를 꿈꾸는 한서희입니다.

이전 포스트

웹접근성&웹표준&크로스브라우징

다음 포스트