어제의 나보다 성장한 오늘의 나

async와 defer의 차이점 본문

공부/JavaScript && jquery

async와 defer의 차이점

NineOne 2021. 4. 19. 22:54

우선 자바스크립트가 어떻게 실행되는지 차례대로 보자!

1. head 안에 스크립트 포함

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body>
    
</body>
</html>

  • 맨 처음 한 줄 한 줄 HTML을 읽는다. (parsing HTML)
  • 읽다가 script를 본다면 어? 읽어야 되네라고 생각한다. 
  • 서버에서 다운 (fetching js)하고 실행(executing js)하고 다시 파싱 한다.

이렇게 head에 넣으면 단점

main.js의 파일이 크다면? 사용자가 웹 사이트를 볼 때까지 오랜 시간이 걸린다.

 

2. body끝부분에 스크립트 포함

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

  • 파싱을 다하고 스크립트를 만나서 실행하게 된다. (이미 사용자가 볼 수 있게 준비 상태 )
  • 그다음 자바스크립트가 서버에서 받아오고 실행하게 된다.

이렇게 body 끝부분에 넣으면 단점

사용자가 기본적인 HTML 콘텐츠는 빠르게 볼 수 있으나, 웹 사이트가 JS에 의존적이라면 ( JS가 동작해야지 이쁘게 꾸며준다면) 사용자가 정상적인 활동을 하기 전까지는 fetching, excuting을 기다려야 한다.

3. haed + async

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

  • HTML 파싱을 진행하다가 script 태그를 만나게 된다면 fetching을 비동기 형식으로 처리하게 된다.
  • fetching이 완료되면 HTML 파서는 멈추고 executing을 실행한 뒤 다시 파싱을 진행한다.
  • async는 boolean 값으로 설정만으로 true를 가진다.

장점

  • body끝에 사용하는 것보다 fetching이 병렬적으로 처리되기 때문에 다운로드 시간 절약

단점

  • 자바스크립트가 HTML 파싱보다 빠르게 실행되면 조작하려고 하는 시점에 HTML에 원하는 요소가 없을 수 있다.

 

4. head + defer

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

  • HTML을 파싱 하는 동안 필요한 script를 다 fetching을 하고 파싱이 끝나면 실행한다.

단점

  • executing 하는 시간을 기다려야 한다.

 

위 4가지 방법 중 defer을 사용하는 것이 일반적으로 가장 좋다!

 

출처

드림코딩 by 엘리

저작자표시 비영리 변경금지

'공부 > JavaScript && jquery' 카테고리의 다른 글

var, let, const에 대해서  (0) 2021.04.19
use strict 순수 바닐라 자바스크립트에서 쓰자!  (0) 2021.04.19
[자바스크립트] 함수 리턴  (1) 2021.04.16
[자바스크립트] call과 apply  (0) 2021.04.16
[자바스크립트] 호출패턴과 this 바인딩  (1) 2021.04.15
'공부/JavaScript && jquery' Related Articles more
Comments