[JavaScript]script태그 속성 async와 defer의 차이점

html 파일을 한 줄 씩 읽어가며 실행한다. 자바 스크립트 파일을 head 태그 안에 선언하면 스크립트 파일이 클 경우 시간 소요가 많다. 이것은 좋은 방법이 아니다.

body 태그 끝에 스크립트 파일을 두는 것은 사용자가 기본적인 html 파일을 빨리 볼 수 있는 것은 장점이지만 만약에 자바 스크립트에 의존적인 웹사이트라면 정상적인 페이지 출력을 하기까지 시간 지연이 있다는 단점이 있다. 

 

async

async는 boolean 타입의 값으로 선언만으로 true로 설정이 된다. 

async가 있으면 html 파싱과 함께 병렬로 자바 스크립트 파일을 다운 받는다. 장점은 js fetching이 html을 parsing하는 동안 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다는 것이고 단점은 html이 전부 parsing되기 전에 js가 실행되기 때문에 자바 스크립트에서 조작하려는 dom요소가 아직 html 파싱 과정에서 정의되어있지 않을 수 있다는 점이다. js가 실행될 때 잠시 parsing을 멈춰야하므로 실행시간이 길다는 단점이 있다. 

defer

head 안에 defer 옵션을 정의하면 파싱을 하다가 js 다운로드 명령만 내리고 html 파싱이 끝난 후 js를 실행하게 된다. 

async와 defer 비교

async로 다수의 스크립트를 다운받으면 정해진 스크립트 순서에 상관없이 먼저 다운로드 된 것을 실행하기 때문에 만약 해당 프로젝트의 자바스크립트가 순서에 의존적이라면 문제가 일어날 수 있다. ((ex) B스크립트 실행을 위해 A스크립트가 선행되어야 하는 경우)

 

defer는 html을 parsing하는 동안 필요한 js파일을 모두 다운로드 한 후 순서대로 실행하기 때문에 우리가 원하는대로 js 파일을 실행할 수 있다. 

따라서 head 안에 defer 옵션으로 작성하는 것이 가장 효율적이고 안전하다. 

 

use strict

자바스크립트를 작성할 때 'use strict'를 파일 제일 맨 위에 작성해주는 것이 좋다. 자바스크립트는 매우 유연해서 위험할 수 있다. 따라서 use strict를 사용해서 상식에 벗어나는 오류를 예방해준다. 타입스크립트를 사용할 경우에는 쓰지 않아도 된다. 

'use strict'; 이런 형식으로 쓰면 된다. 

 

 

출처 : 유튜브 드림코딩 by 엘리