Javascript #3 - async vs defer 와 use strict

async vs defer는 html 문서에서 자바스크립트를 포함할 때, 어떻게 포함하는 것이 더욱 효율적인지 판단하는 것과 같다고 볼 수 있다.

1. head 태그안에 스크립트 포함하기

이렇게 head 태그 안에 스크립트를 넣으면 사용자가 html 문서를 다운로드 받을때 브라우저는 html문서를 한줄한줄 분석한다. 이 때 script태그를 발견하면 hmtl parsing을 멈추고 필요한 자바스크립트 파일을 다운받고 실행하게 된다. 그 다음 다시 html 문서를 다시 파싱한다. 이런 방식의 단점은 만약 자바스크립트 파일이 무거울때 사용자가 html 문서를 다운받고 사용할 수 있을때까지의 시간이 너무 오래걸린다. 

 

2. body 태그 맨 마지막에 스크립트 포함하기

브라우저가 HTML parsing을 다 끝내고 나서 js파일을 서버에서 다운받고 실행한다. 이 방법의 단점은 js 요소가 추가된 코드는 HTML parsing이 다 끝난 다음 실행되므로 js적인 수행을 바로 접할 수 없다.

 

3. head + async

async는 boolean 타입의 속성이다. script 태그안에 async 속성을 쓰면 기본적으로 true 값으로 설정된다. head + async 방식은 HTML을 parsing과 js파일 다운로드를 동시에 수행한다. 그 다음, js 파일을 다운로드 받으면 HTML parsing을 멈춘 후, js 파일을 실행한다. 실행한 후 다시 나머지 HTML parsing을 수행한다. 장점은 HTML 파싱과 js 파일 다운로드를 동시에 수행하기 때문에 사용자가 html 문서를 받는 시간이 다소 줄어든다. 단점은 js가 실헹될 때 언제든 파싱이 멈출 수 있기 떄문에 사용자가 페이지를 완전히 보는데에 여전히 많은 시간이 소요될 수 있다. head + async 방식은 사용자가 정의한 스크립트 순서와는 상관없이 다운로드가 먼저 끝난 js 파일이 먼저 실행되므로 순서의존적인 페이지는 이 방식이 문제가 될 수 있다.

 

4. head + defer

head + defer 방식은 HTML 파싱이 수행되고 있을때 모든 js 파일을 다운받고, HTML 파싱이 끝난 후 (사용자에게 페이지를 다 보여주고 난 후) js 파일을 실행하는 방식이다. head + defer 방식은 HTML parsing을 수핼하고 있을 때 js 파일을 다 다운로드 받기 때문에 순차적으로 js 파일을 실행할 수 있다. head + defer 방식을 사용하는게 가장 효율적이고 안전하다. 

 

※ user strict

'use strict';

순수 바닐라 자바스크립트를 사용할 때, 가장 윗부분에 정의해주면 좋다. 자바스크립트 언어 자체가 굉장히 유연한 언어이기 때문에, 정의되지 않은 변수에 값을 할당한다던지, 기존에 정의된 프로토타입을 변경한다던지 같은 기존에 다른 언어를 공부하고 온 개발자들이 보기에 이해할 수 없는 코드들도 다 실행된다. 이런 이해할 수 없는 코드 사용을 방지해주는 친구가 바로 user strict이다.

ex)

user strict 사용 전

a = 6; ==> 브라우저에서 문제 없이 실행 됨

user strict 사용 후

a = 6; ==> 브라우저에서 a는 정의되지 않았다는 에러가 뜸

(이를 해결하기 위해선 a = 6; 위에 let a; 또는 var a; 를 정의해주어야 함)