async와 defer

language/javascript

async와 defer

건망디 2021. 11. 25. 14:55

<head>안에 <script>를 포함하는 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="main.js"></script>
</head>

1) user가 html 파일을 다운받았을 때 브라우저는 한줄씩 해석 후 DOM 요소로 변환(parsing)

2) parsing 중 <script>태그를 만나면 필요한 js파일을 서버에서 다운받고(fetching) 실행(executing)

3) 이후 다시 parsing하는 부분으로 넘어감

✅ 단점: js파일의 크기가 매우 크면 사이트를 확인할 때 시간이 많이 소요된다

<body>의 맨 하단에 <script>를 포함하는 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div></div>
    <script src="main.js"></script>
</body>
</html>

1) 브라우저가 쭉 parsing후, 페이지의 준비가 완료되었을 때 <script>를 만나서 fetching, executing

✅ 장단점: user가 기본적인 html의 컨텐츠를 빨리 확인할 수는 있지만, 사이트가 js에 의존적이라면 user가 의미있는 컨텐츠를 보기 위한 정상적인 페이지를 확인하기 전까지는 fetching, executing 하는 시간을 모두 기다려야 한다.

<head>안에 async 속성값을 이용하여 <script>를 포함하는 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script async src="main.js"></script>
</head>

1) 브라우저가 html 다운 후 parsing 하다가, async만나서 병렬로 main.js 파일 fetching하면서 parsing

2) main.js 다운로드 완료되면, parsing 멈추고 executing js

3) js 실행 완료하고 나서 나머지 html parsing

정의된 <script>순서와 상관 없이, 다운로드 완료된 순서대로 js를 실행하므로, js가 순서에 의존적이라면 문제가 발생할 수 있다.

✅ 장단점: fetching이 parsing과 병렬적으로 일어나서, html 다운로드 시간을 절약할 수 있다. 그러나, js가 html이 parsing되기 전에 실행되기 때문에, js파일에서 DOM 요소 조작 시점에, html이 원하는 요소가 정의되어 있지 않을 수 있다. 또, parsing하는 동안에 js를 실행하기 위해 block될 수 있기 때문에, user가 페이지를 보는 데에 시간이 걸릴 수 있다.

<head>안에 defer 속성값을 이용하여 <script>를 포함하는 경우

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script defer src="main.js"></script>
</head>

1) 브라우저가 html 다운 후 parsing 하다가, defer만나면 main.js를 다운로드 받으라고 명령(만) 내림

2) 나머지 html 끝까지 parsing

3) parsing이 완료된 후 다운로드 된 js를 executing

parsing하면서 필요한 js 다운로드 받고, parsing먼저 해서 user에게 페이지 먼저 보여준 후, js 실행
정의한 <script>의 순서대로 js가 실행된다
가장 효율적인 option!

+) 'use strict';

js는 매우 유연하지만, 위험한 언어이다.
코드의 상단에 use strict를 선언하게 되면, 선언되지 않은 변수에 값을 할당하는 등의 비상식적인 행동을 방지할 수 있다.
성능개선 또한 가능!

출처: youtube 드림코딩 by 엘리

https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2