JavaScript(자바스크립트) - async / defer 에 대해서 알아보기

지금 현재 학원에서 국비로 수업을 들으면서 진도를 정말 빠르게 나간 것 같다...

자바와 HTML,CSS 기초 1개월 정도만 듣고 나서 국비로 수업을 듣게 되었는데

지금 국비로 수업을 들은게 1개월도 안되었는데 MySQL ,HTML,CSS, Node.js , React 하고 있다..

물론 HTML/CSS도 그렇고 MySQL 도 그렇고 Node.js 도 그렇고 전부 기초적인거라고 하지만

HTML,CSS 는 그래도 배웠으니 괜찮은데 그 외에는 전부 ?? 밖에 안나오는 상황이다.

​

그도 그럴것이 난 자바스크립트를 공부를 하질 않았는데 자바스크립트를 알아야하는 것들을 지금 하고 있으니

더욱 더 이해가 안가는 것 같아서 자바스크립트를 혼자서 처음부터 공부를 해보려고 한다.

 

 

 

우선 vscode로 하기 보다는 codepen 을 이용해서 간단하ㅣ게 먼저 정리를 해보려고 한다.

vscode에서 자바스크립트를 하기 위해서는 위의 사진과 같이 html 뼈대 안에

스크립트를 지정을 해주어야하는데 지금 보면 script가 html 의 head 안에 적용이 되어있다.

이렇게 HEAD 안에 script를 넣게 된다면 읽을 때를 봐야한다.

parsing HTML 이라고 해서 HTML을 위에서부터 아래로 분석을 하게 되는데

이 때 script를 만나게 된다면 우선 parsing을 멈추고 필요한 자바스크립트 파일을 서버에서

다운을 받아서 그 다운 받은 것을 실행하고 그 이후에 멈춘 parsing HTML을 다시 시작하게 된다.

​

자, 그렇다면 이럴 때의 단점은 뭐냐 했을 때 만약 js 파일의 사이즈가 정말 크다면

사용자가 웹사이트를 보게 될 때 오랜 시간이 걸린다는 점이다.

(한국인이 좋아하는 속도가 절대 안나온다고 보면 된다.)

그래서 나오게 된 방식이

 

 

위의 사진과 같이 body 안에 script를 정해주는 건데 이렇게 되면 parsingHTML을 하는 건

크게 문제도 없고 사용자가 HTML 컨텐츠를 보는 것에는 크게 문제를 없을거다

왜냐면 이미 HTML은 parsing이 끝나서 사용자가 화면을 보고 있을거기 때문이다.

하지만 단점이 똑같이 있는데 그건 바로 만든 웹사이트가 자바스크립트의 비중이 가장 높다면

사용자가 의미 있는 컨텐츠 실질적인 컨텐츠를 이용하는데에는 오랜 시간이 걸린다는 단점이 있다.

 

위의 내용과 아래의 내용을 정리하자면

 

맨 위의 사진은 HEAD 안에 script를 두번째 사진에는 BODY 안에 script를 주었는데

이 차이점도 설명은 해보았다, 자 단점을 쉽게 설명을 해보자면 이렇다.

HEAD 안에 script를 정의하면 사용자는 전체적인 HTML 컨텐츠를 이용하는 것도 시간이 걸리지만

BODY 안에 script를 정의하면 전체적인 HTML 컨텐츠만 이용하는 건 오랜시간이 걸리지 않는다.

​

HTML도 오래걸리냐 HTML은 금방이지만 HTML만 이용하냐의 차이 인 것 같다.

내가 지금 당장의 큰 사이즈의 자바스크립트 파일을 만든게 없기 때문에 큰 차이가 날까 하는

생각이 들기는 하지만 차이가 나니까 이렇게 알려줬겠지 생각이 든다.

​

결국에는 HEAD에 script를 정의하면 HTML을 분석 중에 script가 정의된 곳부터 분석을 멈추고

자바스크립트 파일 서버에서 찾고 다운 받고 보여준다인거고

BODY 안에 script를 정의한다면 HTML은 일단 다 분석해서 보여주고 그 후에 자바스크립트

파일을 서버에서 찾고 다운 받고 보여준다의 차이이다.

 

 

---

 

 

 

 

그 다음으로 보게 될 옵션은 async 옵션이라고 볼 수 있는데 위의 코드에서는 asyn 라고 썼다.

이 async 옵션을 사용하게 된다면 parsing 을 하다가 async가 있으면 parsing을 멈추지 않고

서버에서 자바스크립트 파일을 설치함과 동시에 parsing을 쭉하게 되고 설치가 다 된다면

그 때 parsing을 멈추고 자바스크립트를 실행하게 되며 이 실행을 다하게 되면 그 이후

나머지 HTML을 parsing을 하게 된다.

​

이 때의 장/단점은 parsing HTML을 하는 동안에 자바스크립트 파일을 fetching 하기 때문에

자바스크립트 파일을 설치하는 시간은 절약할 수 있다는 장점은 분명히 있다.

하지만 이 자바스크립트 파일이 HTML 전체가 parsing 되기 전에 실행이 되기 때문에

자바스크립트 안에 있는 모든 DOM 요소를 전체적으로 활용도 못하게 HTML에서 정의가 안되어있을 수

있다는 점이 있기 때문에 위험하다고 볼 수 있다.

 

 

 

그리고 다음으로 볼 옵션은 defer 라는 옵션이다.

똑같이 HEAD 안에 script에 defer라고 정의를 해준 후 사용을 할 수 있다.

defer를 사용하게 된다고 한다면 HTML 을 parsing을 하다가 defer를 보게 된다면

자바스크립트를 fetching 서버에서 설치를 하게 되고 이 설치를 하는 동안에도 계속

HTML 을 parsing 하고 있다고 보면 되고 parsing이 끝나면 다운로드가 다 된 자바스크립트를

실행하게 된다고 볼 수 있다.

​

위의 어떤 옵션들보다 제일 효율적인 옵션이라고 볼 수 있다.