async, defer

Robin·2023년 1월 3일

목록 보기

22/24

without async, defer

<!-- 1. header에 넣기 -->
<head>
	<script src="main.js"></script>
</head>

<!-- 2. body 마지막에 넣기 -->
<body>
	<div></div>
	<script src="main.js"></script>
</body>

html parsing 👉 js fetching 👉 js executing

head + async

<head>
	<script async src="main.js"></script>
</head>

async 자체가 boolean 값으로, html parsing과 js fetching을 병렬적으로 실행
async 단점
1. js가 조작하려고 하는 요소(html)가 정의 되어 있지 않을 수도 있다.
2. 여전히 executing 시간 동안 멈추다보니 사용자가 페이지를 보는데에 시간이 걸릴 수 있다.
3. 여러개의 js 파일을 script로 불러올 시, async를 사용하면 패칭되는 순서대로 실행시킨다.
  즉 정의된 순서와 상관없이 다운로드 된 순서대로 실행되기에 만약 js가 순서에 의존적이라면 적합하지 않을 수 있다.

    <head>
    	<script async src="a.js"></script>
    	<script async src="b.js"></script>
    	<script async src="c.js"></script>
    </head>

head + defer

<head>
	<script defer src="main.js"></script>
</head>

js fetching과 html parsing 병렬적으로 실행
html parsing이 다 끝난 이후에 js executing
js fetching html parsing 완료 후 👉 js executing
우리가 정의한 js 파일 순서(위의 예시의 경우 a > b > c)가 지켜진다.

참고: 드림엘리코딩 자바스크립트 기초강의

Robin

Always coding or dog walking

이전 포스트

Array.every(), Array.some()

다음 포스트

async, defer

TIL

without async, defer

head + async

head + defer

Array.every(), Array.some()

[JS] 비동기 처리_MicroTask Queue

0개의 댓글