async vs defer

Notice

Recent Posts

Recent Comments

Link

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

Script

async vs defer 본문

Javascript

async vs defer

scripter. 2022. 6. 11. 08:52

1.<script>태그를 <head>에 넣는 경우

<!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>
<body> 
</body>
</html>

js파일을 불러오느라 html을 불러오는 것이 지연된다.(로딩이 느려진다)

2.<script>태그를 <body>끝단에 넣는 경우

1번에서의 단점이 보완되지만

만약 js의 의존도가 높은 웹페이지라면 html을 불러오고 나서 js를 불러오기 때문에

user가 정상적인 웹페이지를 보기까지 오랜 시간이 소요된다는 단점이 있다.

3.head+async

<!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 asyn src="main.js"></script>
</head>
<body> 
</body>
</html>

html과 js를 병렬식으로 다운로드한다

단, js의 다운로드가 완료되면 js를 먼저 실행시킨후에 html을 마저 다운로드한다

다운로드 시간이 절약된다는 장점이 있지만

js파일이 html 다운로드가 완료되기도 전에 실행되기 때문에 html의 중요도가 높은 웹페이지의 경우

문제가 생길 위험이 있다.

4.head+defer

<!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>
<body> 
</body>
</html>

가장 안정적인 옵션이다.

위와 마찬가지로 html과 js파일을 동시에 다운로드하나,

defer의 경우 js파일의 다운로드가 완료되더라도 html파일의 다운이 완료되고 실행되기 까지 기다린후에

실행된다는 차이점이 있다.

+use strict

알다시피 javascript는 매우 유연한 언어이고 따라서 사용자가 잘못된 문법을 입력했을때

오류가 뜨지않아 제동이 걸리지 않는 경우가 많다.

따라서 js파일 맨 윗부분에 'use stritct';를 입력해줌으로써 제동장치를 마련해줄 필요가 있다.