[JS] 콘솔에 출력, script async 와 defer의 차이점

📌Development/JavaScript

[JS] 콘솔에 출력, script async 와 defer의 차이점

geumsong 2023. 3. 12. 15:24

<자바스크립트로 화면에 Hello World출력하기>

- VSC 실행
- console.log('Hello World!'); 입력
- 파일이름: " main.js "

- 해당 폴더 우클릭 -> Git Bash here -> node main.js 치면 Hello World! 라고 뜬다.

* IDE(Integrated Development Environment)
: 효율적으로 소프트웨어를 개발하기 위한 통합개발환경 소프트웨어 어플리케이션 인터페이스이다.
: 한마디로 개발도구(ex. VSC)

* console API
: 브라우저가 제공하는 함수.

[ 자바스크립트 공식사이트 ]
: developer.mozilla.org (추천)

console.log()

- console.log() 메서드는 "웹 콘솔에 메시지를 출력합니다." 를 의미.

- 콘솔 실행 창 : ctrl + shift + I

이런 식으로 alert API도 볼 수 있다.

- 그냥 hello 라고 쳤을 때, hello가 정의되어 있지 않아서 에러가 뜬다. 따라서 set/var 을 사용해 hello를 정의하고 (set hello;) hello = 10; 이라고 할당(배정)한 후 그 다음에 hello; 만 적어도 10 이라는 값이 나오는 걸 확인할 수 있다.

< async VS defer >

- head 안에 script가 포함될 경우, 사용자들에게 어떻게 보여지는 것일까?

parsing HTML : HTML 파일 다운
fetching js : js 파일 다운
executing js : js 파일 실행

▼
▼

01. parsing HTML ▶ blocked(fetching js → executing js) ▶ parsing HTML

: <head> 안에 <script> 포함

parsing HTML	blocked		parsing HTML
	fetching js	executing js

1.parsing HTML
: 사용자가 HTML파일 다운 -> 브라우저가 한 줄씩 분석(CSS요소와 결합)

▼

2. blocked
: script태그 발견시 분석을 잠시 멈춤. -> 필요한 JS파일을 서버에서 다운(fetching js) 받아 실행(executing js)

▼

3.parsing HTML
: 다시 분석

===> 단점: 이렇게 하면 파일 용량 커지고 인터넷 느려질 수 있음. 따라서 <head>에 <script>를 포함하는 건 X.

02. parsing HTML ▶ fetching js ▶ executing js

: <body>의 제일 끝부분에 <script> 넣기.

parsing HTML

fetching js

excuting js

===> 단점: 웹사이트가 자바스크립트에 의존적이면 사용자가 정상적인 페이지 보기 전까지 fetching 시간, executing시간까지 기다려야함.

03. parsing HTML ▶ main.js파일 실행 명령 ▶ parsing ▶ executing js(blocked) ▶ parsing HTML head + async

: head 안에 <script>이용하되 asyn 속성 이용하기
: asyn : 불리언타입 속성
: 선언하는 것만으로도 true로 설정됨.

parsing HTML	blocked	parsing HTML
fetching js	executing js

-HTML 파일 다운 → asyc 발견하면 병렬로 main.js파일 다운 → 다시 parsing → main.js가 다운로드 완료되면 그때 parsing멈추고 다운로드된 main.js파일을 실행하게됨.

===> 장점: <body> 끝에 사용하는 것보다 fetching 이 parsing하는동안 병렬적으로 일어나기때문에 다운 시간 절약 가능

===> 단점: parsing 되기 전에 실행되기 때문에 js파일에서 조작하려는 시점에 HTML에서 원하는 요소가 아직 정의X 수 있음
===> HTML이 parsing되는 동안 자바스크립트 실행하기위해 멈출수도있음. 페이지를 보기 위해 시간이 더 걸릴 수 있다.
===>
<script async src="a.js"></script>
<script async src="b.js"></script>
<script async src="c.js"></script>

-js파일이 3개라면, 정의된 스크립트 순서와 상관없이 다운로드 먼저 된 것을 실행하기 때문에 순서에 의존하는 것이라면 asyc이용 시 문제가 생길 수 있다.

04. HTML parsing ▶ <script defer> 발견, 다운 명령 ▶ 나머지 HTML parsing ▶ executing js(js파일 실행)

: head + defer

- head 안에 script 쓰고 defer옵션 넣기
- HTML parsing을 먼저 해서 사용자에게 페이지를 보여 준 후 js를 실행.

===> 장점:
<script defer src="a.js"></script>
<script defer src="b.js"></script>
<script defer src="c.js"></script>

- js파일이 3개라면, parsing하는 동안 js를 받아놓은 다음, 순서대로 실행하기 때문에 원하는대로 script 실행된다.
따라서 defer을 쓰는 것이 효율적, 안정적!!

자바스크립트 이용시,

제일 윗부분에

'use strict';

정의하면 좋음. type script 쓸땐 선언할 필요가 없지만, 순수 Valina 자바스크립트 이용할 땐 써야한다.

-이유: Brenden 이 자바스크립트 언어 만들 때 빨리 만들어야 했기 때문에, 유연한 언어로 만들어졌다. 유연하다는 것은 때론 아주 위험한 것. 따라서 개발자가 많은 실수를 할 수 있다는 것을 의미. 자바스크립트에서는 선언되지 않은 변수의 값을 할당한다던지 기존에 존재하는 프로토타입을 변경한다던지 이런 비상식적인 것들은 다른 언어를 공부한 개발자들이 봤을 때 미친듯한 행동들임. 다행히 use strict는 ECMAScript에 추가돼있음. 이걸 쓰면 더 이상 비상식적인 것들을 쓸 수 없게됨.

예시:
1. use strict 사용X

console.log('Hello Wolrd');
a=6

===>브라우저에서는 문제 X.

2. use strict 사용O

'use strict';
console.log('Hello Wolrd');
a=6

===>console에서 에러발생(a는 정리돼있지 않다). 따라서

'use strict';
console.log('Hello Wolrd');
let a;
a=6
===>let a; 라고 선언하면 문제없다.

파일 제일 위에 use strcit사용해서 strcit모드로 개발하는 걸 추천한다. 효율적, 더 빠른 분석 가능.

저작자표시

'📌Development > JavaScript' 카테고리의 다른 글

[JS] operator(연산자), if, switch, for loops 코드 (0)	2023.03.13
[JS] 데이터타입, data types, 변수 선언 let vs var, hoisting (1)	2023.03.12
[JS] JavaScript의 역사, 현재 그리고 미래 (0)	2023.03.11
[JS] UI vs API & 마무리 (0)	2023.03.06
[JS] 라이브러리와 프레임워크 (0)	2023.03.06

현재글[JS] 콘솔에 출력, script async 와 defer의 차이점

geumsong lee blog

Today :
Yesterday :

일	월	화	수	목	금	토
					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

geumsong lee blog

[JS] 콘솔에 출력, script async 와 defer의 차이점