[자바스크립트/javascript] async 와 defer의 차이점과 'use strict'

https://www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=2 

드림코딩 유튜브 보고 공부한 내용

 

1.async 와 defer

우리가 js파일을 만들고 html파일에다가 연결시킬 때 여러 방법이 있다.

 

먼저 head 영역에다가 연결시키는 방법이다.

이 방법은 별로 좋지 않다.

브라우저가 한 줄씩 코드를 분석하고 이해한 것을 CSS와 병합하여 DOM요소로 변환하는데, 분석하다가 스크립트 태그가 보이면 js파일을 다운받아야 한다고 이해하게 되고, html파일을 분석(parsing)하는 것을 멈추고 js파일을 다운로드하게 된다.

그리고 js를 실행한 다음에 다시 코드를 읽어나간다.

 

만약 js파일이 엄청 크고, 인터넷이 느린 상황이라면 웹사이트를 보기까지 오랜 시간이 소요된다.

 

그래서 body 제일 끝부분에다가 넣는 방법도 있다.

하지만 만약 웹사이트가 js에 의존적인 사이트라면 정상적인 페이지를 보기 전까지는 사용자가 서버에서 js를 받아오고 실행하기까지 기다려야하는 단점이 있다.

 

 

그래서 head + async를 사용하는 방법이 있다.

<script async scr='링크'></script>

async는 불린 타입의 속성 값이기 때문에 선언하는 것만으로도 True라고 설정이 된다.

async를 사용하게 되면, 브라우저가 html을 다운로드 받아서 parsing을 하다가 async를 만나면 병렬로 js파일을 다운로드하자고 명령해 놓고, 계속 parsing하다가 js다운이 완료되면 parsing을 잠시 멈추고 js를 실행하게 된다.

 

장점

-다운로드 시간을 절약할 수 있다.

 

단점

-js가 html parsing이 다 끝나지 않은 상태에서 실행되기 때문에 쿼리셀렉터를 이용하여 DOM을 조작할 때 조작하려는 시점에 html에서 우리가 원하는 요소가 아직 정의되지 않았을 수 있다.

-잠시 멈추는 구간으로 인해 여전히 사이트를 보는 데에 시간이 걸릴 수 있다.

-연결 된 js가 여러 개고 순서에 의존적인 페이지라면, async는 먼저 다운로드된 순서로 실행되기 때문에 좋지 않을 수 있다.

 

head + defer 방법

<script defer scr='링크'></script>

제일 안전한 방법이다.

parsing하다가 defer를 만나면 js를 다운하자고 명령시켜 놓고 나머지 html을 끝까지 parsing하게 된다.

그리고 parsing이 끝난 다음에 js를 실행하게 된다.

먼저 사용자에게 페이지를 보여준 다음에 js를 실행하는 것이다.

장점

-순서에 의존적인 페이지여도 먼저 다 다운받은다음 우리가 정의한 순서대로 실행되기 때문에 문제가 발생하지 않는다.

 

 

2. 'use strict'

타입스크립트에서는 필요없지만 순수 바닐라js라면 js파일의 최상단에다 'use strict' 를 선언해 주는 것이 좋다.

자바스크립트는 다른 언어에 비해 매우 유연한 언어이다. 유연하다는 것은 위험하다는 것과 마찬가지이다.

그래서 다른 언어에서 비상식적인 자바스크립트의 특징들을 없애주고 좀더 상식적인 범위 안에서 사용할 수 있게 하기 위해 'use strict' 을 선언해준다.

js엔진이 좀더 효율적으로, 빠르게 js를 분석할 수 있기 때문에 실행할 때 성능 개선이 된다.

ex) 'use strict'을 선언하기 전, a = 6 은 브라우저에서 아무 문제도 못잡아내지만 'use strict' 을 선언하면 에러가 난다. let a를 선언해주고 a = 6 와 같이 쓰면 에러가 나지 않는다.