728x90
320x100
1. 아무것도 안한 상태의 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="javascript.js"></script>
</head>js가 실행되는 과정
(1) parsing html (한줄한줄 읽다가)
(2) [blocked]
-script부분을 만나면 parsing html을 잠시멈추고,
-fetching js (서버에서 다운받는일)를 한뒤
-executing js (실행)한다.
(3) 다시 parsing html
문제점 : js파일이 크거나 인터넷이 느리면 사용자가 웹사이트를 보는데까지 많은시간이 걸림
2. body안 끝단에 script를 추가하는 방식
</head>
<body>
<script defer src="javascript.js"></script>
</body>
</html>
(1) parsing html
(2) fetching js
(3) exeuting js
문제점: html을 끝까지 읽은 뒤 js 다운 및 실행되기 때문에 사용자가 html의 컨텐츠를 빨리 보는 장점은 있지만
웹사이트가 자바스크립트에 의존적인 상황이라면 사용자가 정상적인 페이지를 보기전까지는
서버에서 자바스크립트를 받아오는 시간과 실행하는 시간을 기다려야되는 단점이 있음
3. head에 asyn을 추가하는 방식 (async)
<script asyn src="javascript.js"></script>js가 실행되는 과정
(1) parsing html & fetching js(병렬로 진행됨)
(2) [blocked]
잠시 멈추고 exeuting js
(3) 나머지 html 읽기
문제점: 바디끝에 사용하는것보단 fetcing이 병렬적으로 일어나기 때문에 다운로드 시간을 절약할 수 있지만
html이 준비되기도 전에 js가 실행되어 원하는 요소가 정의되어있지 않을 수도 있기 때문에 이 부분이 조금 위험할 수 있다.
또한 executing 과정중 parsing을 멈추기 때문에 여전히 시간이 걸린다.
4. head에 defer를 추가하는 방식 (가장 best)
<script defer src="javascript.js"></script>js가 실행되는 과정
(1) parsing html & fetching js(병렬로 진행됨)
(2) parsing html이 완전히 끝난후 executin js
제일 안정적인 방법이다.
async와 defer의 차이점
(js가 여러개인 경우)
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
async는 다운이 완료가 된 순서대로 실행이 된다. 즉 순서가 뒤죽박죽 될 가능성이 있음. js의 순서에 의존적인 경우라면 문제가 됨.
하지만 defer의 경우 parsing html 완료 후 적힌대로 순차적으로 실행하기때문에 문제가 없음!
결론 : defer를 사용하는것이 가장 좋다.
이 글은 유튜브 드림코딩 by 엘리님의 JS 입문강의를 보면서 정리한것 입니다.
728x90
320x100
'front-end > JavaScript' 카테고리의 다른 글
| [JS]05-object(for..in, for..of 등) (0) | 2022.02.25 |
|---|---|
| [JS]04-Class(클래스 만들기, 게터와 세터, static 등) (0) | 2022.02.25 |
| [JS]03-function(함수, parameters (변수), 콜백 함수, 화살표함수/first class fn 등) (0) | 2022.02.24 |
| [JS] 02-operator (연산, 반복문, for, while, swich 등) (0) | 2022.02.23 |
| [JS ]01-variable (var와 let차이, const, primitive 타입 등) (0) | 2022.02.23 |
댓글