Javascript-async, defer 차이

김경천·2021년 4월 22일

async,defer차이

Uncaught TypeError떴다.

defer추가하니깐 됬다.

async, defer속성은 자바스크립트 로드와 실행차이를 보여준다.

1.`<head>`안에 옵션 없는 일반 스크립포함

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

로드순서
HTML 파싱 -> <head> 에서 JS파일 발견 -> HTML 파싱 멈춤 -> JS다운 -> JS실행 -> 다시 HTML파싱

단점

위의 로드 순서대로 JS파일이 크거나, 인터넷이 느리면 사용자가 웹사이트를 보기까지 오래걸린다.

2. body끝에 일반 스크립트 포함

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

로드순서
BODY태그 끝까지 HTML파싱 -> JS파일 발견 -> JS다운 -> JS실행

장점

HTML컨텐츠를 빠르게 본다.

단점

의미있는 컨텐츠가 JS파일에 의존적이면 사용자가 기다려야한다.

3. `<head>` 안의 `<script async..></script>`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="mainA.js" async></script>
    <script src="mainB.js" async></script>
    <script src="mainC.js" async></script>
</head>
<body>
</body>
</html>

로드순서
HTML 파싱 -> HTML파싱 멈춤 -> 다시 HTML 파싱
JS파일다운 -> JS파일 실행
위의 방법으로 여러개의 JS파일을 수행 할 경우. 다운은 병렬로 수행되지만. 실행은 다운 완료된 순서대로 실행 되므로 수행의 파악의 어려움이 있다.
장점

JS다운과 HTML 파싱이 병렬적으로 일어나서 다운로드 시간을 줄인다.

단점

JS가 HTML이 파싱되기도 전에 실행되기에 JS파일과 관련된 HTML의 요소가 파싱되지 않아 정의 되지 않을경우 페이지 로드의 위험이 있다.

4.`<head>`안의 `<script defer...></script>` (기본적으로 가장좋은방법)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="mainA.js" defer></script>
    <script src="mainB.js" defer></script>
    <script src="mainC.js" defer></script>
</head>
<body>
</body>
</html>