JavaScript - script async와 defer의 차이점

웹 api - 자바스크립트 언어에 포함된게아니고 브라우저가 제공하는, 브라우저가 이해하는 함수.

 

html에서 자바스크립트를 포함할때 어떻게 포함하는게 효율적인가? 

 

1.헤드안에 스크립트를 포함 - 

웹브라우저가 html을 한줄한줄씩 parsing하면서 내려가다가 script를 발견하면 해당 js파일을 받기위해 한줄씩 읽던걸 멈추고 필요한 자바스크립트를 서버에서 다운받아 실행한후 다시 parsing하게됨

 

단점? - js파일이 엄청 크거나 인터넷이 느리다면 사용자가 웹페이지를 보기까지 너무 오래걸림

 

2.그래서 body안 맨 끝에 script파일을 위치시켜서 웹브라우저가 html을 모두 parsing한후에 fetching js -> executing js

단점? - 웹사이트가 자바스크립트에 매우 의존적이라면, 사용자가 의미있는 페이지를 보기까지 시간이걸림

 

3. 헤드안에 스크립트를 이용하되 async옵션을 사용하는것,

asyn 발견 - 이 js파일을 병렬적으로 다운받자 하고 명령하고 계속해서 밑으로 html parsing진행하다가 js파일이 다운이 완료되면 파싱을 멈추고 js파일을 실행함 

단점 - 자바스크립트가 html이 파싱되기전에 실행되기떄문에 스크립트파일에서 쿼리셀렉터를 이용해서 돔요소를 조작한다면 조작하려고하는 시점에 html에 아직 그 요소가 정의되어있지 않을수있는 위험함, 사용자가 페이지를 보는데 시간이 걸림.

 

4. defer요소

html parsing과 병렬적으로 fetching js를 진행하고 html 파싱이 끝나면 js파일을 실행한다.

 

# 'use strict'; --> 안전하게 자바스크립트를 사용할수있게함 (선언되지않은 변수를 사용하거나, 프로토타입을 변경한다거나)