async와 defer의 차이점

참고자료 :
드림코딩 by 엘리 자바스크립트 2. 콘솔에 출력, script async 와 defer의 차이점 및 앞으로 자바스크립트 공부 방향

information

• javascript 공부는 MDN이 최신 업데이트가 빨라서 적합하다.

* 요약

• node js에는 javascript 엔진이 내장되어 있어서 브라우저 없이도 터미널에서 javascript를 실행 할 수 있다.
• API : Application programming interface의 약자
• Web API : 브라우저가 이해 할 수 있는 함수

'use strict'

• 바닐라 js를 사용 하는 유저는 js 문서의 제일 위에 'use strict'를 선언해야 한다.
• 이유 :
  기존 자바스크립트에서는 선언 되지 않은 변수에 값을 할당해도 할당이 되는 위험한 문제가 있었다.
  'use strict'를 선언하면 이러한 문제가 오류로 출력 되어 실행되지 않는다.
  최신 문법에 의해 자바스크립트가 빨라지는 성능 개선을 기대할 수 있다.

asyn

• head 엘리먼트 안에 script를 위치 시킨다.
• script 태그 안에 asyn 옵션을 준다.
• asyn은 boolean type이기 때문에 기본 true 값으로 설정 된다.
• 장점 : HTML 파일과 javascript 파일을 병렬적으로 다운로드 받기 때문에 다운받는 시간이 절약 된다.
• 단점 :
  1. javascript 파일을 다운 받고 실행 하는 동안 HTML 파일의 fetching이 멈춘다.
  2. javascript 파일을 다운 받고 바로 실행 하기 때문에 각 js 파일의 다운과 실행시간이 다 달라서 오류가 날 수 있다.
  

defer (asyn 보다 더 좋은 방법)

• head 엘리먼트 안에 script를 위치 시킨다.
• script 태그 안에 defer 옵션을 준다.
• 장점 :
  1. HTNL 파일을 fetching 하는 동안 동시에 병렬적으로 js 파일을 다운 받는다.
  2. HTML 파일을 모두 fetching 하고 js 파일을 실행 시키기 때문에 기다리는 시간도 적고, 오류 가능성도 낮아진다.