[javascript]02_ script async 와 defer의 차이점

1. script 를 head 에 포함

ㄴ

브라우저는 한줄 한줄 씩 읽는다.

1. html을 쭈욱 parsing 하다가 script 태그가 보이면 main.js 를 다운받아야 하네? 라고 이해한다.

2. html을 parsing하는 것을 잠시 멈추고 필요한 자바스크립트 파일을 서버에서 다운 받아서 이것을 실행한 다음에 다시 html 을 parsing 하는 부분으로 넘어가게 된다

 

하지만 여기서 단점이 존재한다 !

=> 만약 js 파일의 사이즈가 어마어마하게 크고 인터넷도 느리다면 사용자가 웹사이트를 보는 데까지 많은 시간이 소요된다  

 

 

---

2.  해결?      body 안의 젤 끝부분에 script 넣는다 

1. html 을 다운받아서 쭈욱 parsing한 다음에 페이지가 준비가 된다면   

2. 그 다음에 이 스크립트를 만나서 스크립트를 fetching 서버에서 받아오고   

3. 실행(executing js)하게 된다

 

그래서 페이지가 사용자들에게 이 js 를 받기 전에도 이미 준비가 되어서 사용자가 벌써 페이지의 컨텐츠를 볼 수 가 있다 

 

단점?

=> 사용자가 기본적인 html 컨텐츠를 빨리 본다는 장점은 있지만

만약에 웹사이트가 이 자바스크립트에 굉장히 의존적인거라면, 즉 사용자가 의미있는 컨텐츠를 보기 위해서는 이 자바스크립트를 이용해서 서버있는 데이터를 받아온다던지 아니면 도움 요소를 더 이쁘게 꾸며 준다던지 그런식으로 동작하는 웹사이트라면 사용자가 정상적인 페이지를 보기 전까지는 fatching 하는 (서버에서 자바스크립트를 받아오는 시간) 도 기다려야 하고 executing(실행하는 시간) 도 기다려야 하는 큰 단점이 있다. 

 

 

 

---

3. head + async

d 

async 는 boolean 타입의 속성 값이기 때문에 이렇게 선언하는 것만으로도 true 로 설정이 되어서 이렇게 옵션을 사용할 수 있다.

 

1. async를 사용하게 되면 브라우저가 html을 다운로드 받아서 parsing하다가   

2. async를 발견하면 병렬로 이 main.js파일을 다운로드 받자 라고 명령만 해놓고 다시 parsing 한다.

3. 이 main.js 가 다운로드가 완료가 되면 그때 parsing하는 것을 멈추고 다운로드된 main.js 실행하게 된다. 

4. 이렇게 실행을 다하고 나서 나머지 html을 parsing 하게 된다 

 

장점 

body 끝에 사용하는 것보다는 fetching 이 parsing 하는 동안 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다.

 

단점

하지만 이 자바스크립트가 html 이 parsing 되기도 전에 실행되기 때문에 만약 자바스크립트 파일에서 query selector 를 이용해서 dom 요소를 조작한다 그러면 이 조작하려고 하는 시점에 html 이 우리가 원하는 요소가 아직 정의되어 있지 않을 수가 있다. 이 부분이 조금 위험할 수 있다. 또 하나는 이 html을 parsing 하는 동안에 언제든지 자바스크립트를 실행하기 위해서 이렇게 멈출 수  있기 때문에 사용자가 페이지를 보는데 시간이 여전히 조금 더 걸릴 수 있는 단점이 있다. 

 

=> 즉

<script async src = "a.js"></script>

<script async src = "b.js"></script>

<script async src = "c.js"></script>

이렇게 async 옵션으로 다수의 스크립트 다운 받게 되면 다운로드가 먼저 된 것을 실행하게 된다 .

정의된 스크립트 순서에 상관없이 다운로드가 완료된 것(ex. b->a->c )을 먼저 실행하기 때문에  

만약 여러분들의 자바스크립트가 순서에 의족적인 거라면 문제가 된다. 

 

 

---

4. head + defer

 

1. parsing 하다가 script defer 이 있네? 그러면 main.js를 다운로드 받자 명령만 시켜 놓고 나머지 html을 끝까지 parsing하게 된다

2. 그리고 마지막에 parsing이 끝난 다음에 다운로드 되어진 자바스크립트를 실행하게 된다 

 

즉,  html parsing 하는 동안 필요한 자바스크립트를 다 다운로드 받아놓고 html parsing 을 먼저 해서 사용자에게 페이지를 보여준 다음에 바로 이어서 자바스크립트를 실행하게 된다 

 

 

 

<script defer src = "a.js"></script>

<script defer src = "b.js"></script>

<script defer src = "c.js"></script>

이렇게 defer 옵션으로 다수의 스크립트 다운 받게 되면 parsing하는 동안 필요한 자바스크립트를 다 다운로드 받아 높은 다음에 순서대로 실행하기 때문에 우리가 작성한 순서가 지켜져서 원하는대로 스크립트가 실행이 된다. 

 

 

 

 

 

 

 

여러모로 defer 옵션이 가장 효율적이고 안전하다 !!

 

---

 

※ 순수 자바스크립트를 이용할 때 'use strict';  사용하자 

 

ECMAScript 5 ( https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode ) 

에서 소개된 JavaScript 의 Strict mode는 JavaScript 의 제한된 버전을 선택하여 암묵적인 "느슨한 모드(sloppy mode)" 를 해제하기 위한 방법이다. 

Strict mode 는 평범한 JavaScript 시멘틱스에 몇가지 변경이 일어나게 한다.

1. 기존에는 조용히 무시되던 에러들을 throwing 한다.
2. JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡습니다. 가끔씩 엄격 모드의 코드는 비-엄격 모드의 동일한 코드보다 더 빨리 작동하도록 만들어진다.
3. 엄격 모드는 ECMAScript의 차기 버전들에서 정의 될 문법을 금지한다.

이런 use strict 을 선언하게 되면 우리가 더 이상은 비상식적인 것을 쓸 수 없게 된다. 

또, 자바스크립트 엔진이 더 효율적으로 더 빠르게 자바스크립트를 분석할 수 있기 때문에 실행하는데 있어서 더 나은 성능 개선까지 기대할 수 있다.