[JavaScript]드림코딩 : script async와 defer의 차이점

 

1)Head 안에 script 추가할때

 브라우저는 한줄씩파싱하다가 스크립트태그를 만나면 파싱을 멈추고, js다운과 실행이 완료되었을때 페이지를 다시파싱한다.

JS파일이 크고무거울수록 페이지로딩지연이 계속늘어난다.

사용자가 웹사이트를 보는데까지 많은 시간이 소요된다.

 

 

 

2 )body 밑에 script추가할때

사용자가 기본적인 Html컨텐츠를 빨리본다는장점

하지만 컨텐츠가 js에 의존적,즉 의미있는 컨텐츠를 보기위해서는 서버에서 자바스크립트를 받아오는 시간도 기다려야하고 실행하는 시간을 기다리는 단점도 있다.

 

 

 

3) head + async

head에 script로 넣지만 async라는 속성값을 준다.

asyn: 불리언타입의 속성이라 선언하는것만으로 true로 설정이 된다.

브라우저가 파싱을하다가 병렬로 js파일로 다운명령을 한다. 다운이 다 되면 파싱을 멈추고 js파일을 실행한다.

 

-body끝에사용하는것보다 다운받는시간을 절약할수있음

-쿼리셀렉터이용해서 돔조작시, 조작시점에 html 조작하려는 요소가  아직 정의되어있지않을수도 있음

-언제든지 js 실행을 위해 html파싱이 멈출수있으므로 사용자가 페이지로드하는데 시간이 여전히 소요된다는 단점

 

 

 

4) head + defer

파싱을 하다가 다운로드 명령만 시켜놓고 html을 끝까지 파싱을하게된다. 끝났을때 js파일을 실행하게된다.

제일 좋은 방법!

 

 

 

head+async 

정의된 순서에는 상관없이 다운로드순서에 따라 실행되기때문에

의도가 순서에 의존적인거라면 async 는 문제가 될수있음

 

head+defer

원하는 순서에 따라 실행되기원할때 defer을 사용하는게 효율적이고 안전함

 

---

 

'use strict'; 

자바스크립트 상단에 먼저 정의해주기

ES5에 따른다는 의미로 선언한다.

타입스크립트는 쓸필요없는데 자바스크립트는 유연한 언어다.그렇기때문에 때로는 위험(실수여지가 많을수있음을 의미 가령,변수를 선언하지않았는데 값을 줘도 브라우저에서는 오류가 안난다거나하는 상식밖의 문제가 생김)

그래서 strict 모드로 작성하는게 좋다.

 

 

 

 

 

 

Reference

https://youtu.be/tJieVCgGzhs