head에 js 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>
<!-- 1. head에 js script 삽입 -->
<script src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>
순서
parsing html -> fetching js -> executing js -> parsing html
설명
browser가 한 줄 한 줄 html을 parsing(분석)을 하다가 태그를 만나면
parsing을 멈추고 server로부터 js를 fetching(가져오다) 하고 excuting(실행) 한다.
단점
js가 크면 웹사이트를 보는 데 까지 많은 시간이 소요된다.
body 가장 아래에 js 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>
<!-- 2. body 가장 아래에 js script -->
<script src="main.js"></script>
</body>
</html>
순서
parsing html -> fetching js -> executing js
설명
browser가 html을 다 parsing 한 다음 js를 fetching하고 executing 한다.
js를 받기 전에도 사용자가 페이지를 볼 수 있다.
단점
웹사이트가 js에 굉장히 의존적이라면( (ex)서버에서 데이터를 받아와야하거나, DOM요소를 더 이쁘게 꾸며준다거나)
사용자가 정상적인 사이트를 보기까지 시간이 오래 걸린다.
head에 async script js
<!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>
<!-- 3. head에 async script js -->
<script async src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>
순서
parsing html -> parsing html, fetching js(동시) -> executing js -> parsing html
설명
boolean 타입으로 기본값이 true 이다.
broswer가 html을 parsing하다가 async를 만나면 js fetching을 병렬적으로(동시에) 진행한다.
fetching이 끝나면 html parsing을 멈추고 js를 executing 하고 그 다음 마저 html을 parsing 한다.
실무에서 방문자 수 카운터나 광고 관련 스크립트같이 독립적인 스크립트에 혹은 실행 순서가 중요하지 않은 경우에 적용한다.
장점
js 다운로드 시간을 단축할 수 있다.
단점
html이 전부 parsing 되기 전에 js가 실행되기 때문에 js에서 가르키는 html요소가 없을 수 있다.
js를 executing 할때 html이 parsing을 멈추기 때문에 여전히 시간이 더 걸릴 수 있다.
script 정의 순서와 상관없이 fetching되는 대로 js를 executing 하기 때문에 (b, c가 a보다 빠를 수도 있다.)
js가 순서대로 의존적이라면 오류 가능성 있다.
<!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>
<!-- 3. head에 async script js -->
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>
</head>
<body>
<div></div>
</body>
</html>
head에 defer script js
<!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>
<!-- 4. head에 defer script js -->
<script defer src="main.js"></script>
</head>
<body>
<div></div>
</body>
</html>
순서
parsing html -> parsing html, fetching js(동시) -> executing js(html parsing이 끝난 후)
설명
html을 parsing하다가 defer를 만나면 fetching js를 동시에 진행한다.
html parsing이 다 끝난 후에 executing js를 진행한다.
실무에서 DOM 전체가 필요한 스크립트나 실행 순서가 중요한 경우에 적용한다.
장점
fetching js도 동시에 하면서 페이지를 보여준 다음에 js를 executing 하기 때문에 가장 좋은 옵션이다.
async와 다르게 정의한 순서대로 js를 executing 한다. (a.js 실행 -> b.js 실행 -> c.js 실행)
단점
스크립트가 실행되기 전 페이지가 화면에 출력되기 때문에 사용자가 그래픽 관련 컴포넌트들이 준비되지 않은 상태에서 화면을 보게 될 수 있다.
따라서 지연 스크립트가 영향을 주는 영역엔 반드시 '로딩 인디케이터’가 있어야 하고 관련 버튼도 사용 불가(disabled) 처리를 해줘야 한다.
이렇게 해야 사용자에게 현재 어떤 것은 사용할 수 있는지, 어떤 것은 사용할 수 없는지를 알려줄 수 있다.
References
www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2
'FRONTEND > Javascript' 카테고리의 다른 글
| [Javascript] This 정리 (0) | 2021.05.02 |
|---|---|
| [Javascript] primitive type(기본 타입) (0) | 2021.05.01 |
| [Javascript] 배열 추가 / 삭제 정리 (push, unshift, pop, shift, slice, filter, splice, length) (0) | 2021.04.24 |
| [Javascript] 최대값 / 최소값 구하기 (0) | 2021.04.23 |
| [Javascript] D-day 계산기 (0) | 2021.04.23 |
댓글