[드림코딩 JS] #1 script async 와 defer의 차이점

 

드림코딩 by엘리

 

www.youtube.com/playlist?list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2

 

---

AJAX : 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있도록 도와준다.

 

SPA(Single Page Application) : 하나의 페이지 안에서 데이터를 받아와서 필요한 부분만 업데이트하는 것이 유행이다.

물론 자바스크립트만으로도 구현이 가능하겠지만, SPA를 조금 더 쉽게 만들기 위해서 React, ANGULAR. VUE 등이 나오는것이다.

 

---

많은 개발자들이 공식 사이트처럼 이용하는 곳이 MDN이다.

developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript

 

---

< async vs defer >

 

먼저 head안에 스크립트를 포함한 경우를 살펴보자.

사용자가 html 파일을 다운받았을 때 브라우져가 한줄한줄씩 분석(parsing)을 한다.

분석한 것을 css와 병합해서 DOM요소로 변환하게 된다.

일단 브라우져가 한줄씩 한줄씩 읽는다고 이해하는게 좋다.

 

parsing을 하다가 스크립트 태그를 발견하면 컴퓨터는 main js를 다운 받아야 된다고 이해하게 된다.

그때 html을 parsing하는 것을 멈추고 필요한 자바스크립트 파일을 서버에서 다운받아서

실행한 다음에 parsing하는 부분으로 넘어간다. 

 

이렇게 하면 단점이 무엇일까?

Js파일이 크고 인터넷이 느리면 사용자가 웹 사이트를 보는데까지 많은 시간이 소요된다.

 

그래서 body 끝에  스크립트를 추가하면 브라우져가 html 다운받아서 parsing을 쭉 해서 페이지가

준비가 된 다음에 스크립트를 만나서 스크립트를 fetching(서버에서 받아오는 것)해서 실행하게 된다.

---

다음으로 생각해볼 수 있는 옵션은 head + async이다.

head안에 넣돼 asyn라는 속성값을 넣는것이다.

불리언 타입의 속성이라 선언하는 것만으로도 true로 설정되어서 asyn 옵션을 사용할 수가 있다.

parsing을 하다가 스크립트 태그를 만나서 병렬로 main.js파일을 다운로드 받자고 명령만 해놓고

다시 parsing을 하다가 main.js 다운로드가 완료가 되면

그때 parsing하는것을 멈추고 다운로드된 js파일을 실행하게 된다.

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

 

그러면 장단점은?

body 끝에 사용하는 것보다는 다운로드 시간을 절약할 수 있다.

하지만 이 자바스크립트가 html이 parsing되기도 전에 실행이 되기 때문에

만약 html파일에서 쿼리 셀렉터를 통해서 DOM요소를 조작하려고 한다면

그 조작하려고 하는 시점에 HTML이 우리가 원하는 요소가 아직

정의되어 있지 않을수 있어서 위험하다.

 

---

head + defer

 

  

defer이라고 하는 옵션을 정의하게 되면

parsing을 하다가 main.js를 다운로드 받자고 명령만 해놓고

나머지 html을 끝까지 parsing하게 된다.

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

 

딱봐도 defer가 가장 좋은 옵션이다.

(사용자에게 페이지를 보여주고 나서 바로 JS를 실행하므로)

 

---

정의된 스크립트 순서와 상관없이 다운로드가 먼저된것을 실행하기 때문에

순서에 의존적인 자바스크립트라면 async 옵션이 문제가 될 수 있다.

---

defer 같은 경우는 parsing하는 동안 필요한 자바스크립트를 다운로드 받은 다음에

순서대로 실행하므로 우리가 정의한 순서가 지켜져서 그 순서를 예측할 수가 있다.

 

그러므로 defer가 효율적이고 안전하다.

---

순수 바닐라 자바스크립트를 이용할 때는 가장 윗부분에 use strict를 정의해주면 좋다.

(타입스크립트 사용시는 적지 않아도 된다.)

 

자바스크립트는 굉장히 유연한 언어로 만들어져서 때로는 매우 위험하다.

개발자가 많은 실수를 할 수가 있으므로 저걸 선언하면 비상식적인 적을 쓸 수 없게 해준다.

 

예를 들면 선언하지 않은 변수를 그냥 작성하면 브라우저 상에서는 문제가 없는데

use strict를 정의하면 아래와 같이 에러라고 뜬다.

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

 

---

 

 

 

 

 

 

 

 

 

 

 

 

 

※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다.