[JavaScript] 콘솔에 출력, script async / defer 차이점 (With. Ellie)

드디어 HTML 과 CSS 다음에 프로그래밍 언어 JavaScript 까지 무사히 시작하게 되었다.

이번에도 차근차근히 기초부터 꼼꼼히 JS를 배워보도록 하자!

 

우선 VScode를 실행해서 js 파일을 만들어 JS의 시작을 알리는 Hello World를 콘솔 창에 출력해 보았다.

또, index.html 파일을 만들어서 JavaScript가 실행되게끔 하는데 있어서,

js파일을 포함하는 과정에 있어 어느 방법이 효율적인지 알아보았다.

 

1) 콘솔창에 Hello Woooorld! 출력하기

javascript에서 콘솔창에 Hello Woooorld!를 출력하는 명령어는

console.log( )를 사용한다.

( )안에 출력하고자 하는 내용을 작성하면 되는데, Hello Wooorld!와 같은 문자열은

' ' 나 " "로 감싸서 작성하면 된다. 

<코드>

console.log('Hello Wooorld!");

<출력된 화면>

console 창

 

2) html 파일에 js 파일 포함하기( async vs defer )

<script src="app.js"></script>

 Q. head에 포함할 것이냐? 아님 body에 포함할 것이냐?

- head

head 부분에 script 포함

한 줄씩 브라우저가 읽고 DOM형식으로 바꾸는 과정을 겪는데 head 부분을 읽다가 script 부분을 만나면,

HTML parsing 과정을 멈추고 필요한 js파일을 서버에서 다운받고 실행한 뒤에 다시 parsing 하게 된다.

만약 여기서, js파일이 사이즈가 크고 인터넷이 느리다면 사용자가 page를 보기까지의 시간이 오래 걸리는 단점이 있다. 

그래서 그냥 script를 head 부분에 추가하는 것은 좋은 방법이 아니다.

 

- body

body 부분에 script 포함

body 끝 부분에 script를 포함하게 된다면 HTML의 모든 parsing이 끝나고 js 파일을 다운받고 실행하기 때문에,

사용자가 js파일을 다운받기 전에도 준비된 page의 컨텐츠들을 볼 수 있다는 장점이 있다.

하지만, 만약 웹 사이트가 js에 의존적이라면 정상적으로 js가 적용된 page를 보기까지는 js가 fetching, executing 하는 시간을 기다려야 한다는 단점이 있다.

 

- head + async

head 부분에 script + async 포함

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

우선 이 코드의 경우에는 브라우저가 코드를 읽고 HTML을 parsing 하는데 script의 async를 만나게 되면,

js파일을 다운받자는 명령을 병렬로 내려놓고, js가 fetching 되면 HTML parsing이 멈춘 뒤 js를 executing하고 다시 나머나머지 HTML을 parsing 한다. 이 경우, body의 끝 부분에 script가 있는 경우 보다는 HTML parsing과 js fetching을 병렬적으로 동시에 하기 때문에 시간을 절약할 수 있다는 장점이 있다. 

하지만, js가 모든 HTML이 parsing되기 전에 실행되기 때문에 js를 적용하려 할 때 대상이 되는 요소가 정의가 되지 않았을 수 있어 위험할 수 있다. 또한, js를 실행하는 동안에는 HTML parsing이 멈추기 때문에 여전히 사용자가 페이지를 볼 때까지 시간이 걸린다는 단점이 있다.

 

- head + defer

head 부분에 script + defer 포함

이 경우에는 위에서부터 차례대로 HTML을 parsing 하다가 defer을 만나면, js파일을 다운하세요 명령 시켜놓고,

나머지 HTML을 끝까지 parsing 하게 된다. 그리고 parsing이 끝난 후에 전에 다운받아진 js를 executing 한다.

이렇게 된다면, 필요한 js파일을 HTML을 parsing하는 것과 동시에 다운받을 수 있어 시간이 절약되고,

page 또한, HTML이 parsing된 후에 바로 준비되기 때문에 사용자가 빨리 psge를 볼 수 있다. 그리고 js를 executing 할 때에도 HTML parsing이 끝났기 떄문에 요소가 정의 되었는가에 대한 것을 걱정할 필요가 없기 때문에 가장 효율적인 방법이라는 것을 알 수 있다!!

 

강의가 정말 이해하기 쉽게 잘 설명되어 있어서 즐겁게 공부할 수 있었다!! 최고오옹!!!

다음에는 data types, let vs var, hoisting에 대해 다뤄보도록 하자~~

화이티이잉><