Javascript 정리 1

*드림코딩 by 앨리 님의 유튜브 강의 내용을 바탕으로 작성했습니다.

 

 

async와 defer의 차이

html에서 javascript를 포함할 때 어떻게 포함하는 것이 더 효율적인가?

 

 

-head 내 단순히 script 를 포함하는 경우

 

사용자가 html 파일을 다운 받았을 때, 브라우저는 한 줄씩 분석(parsing)

한 줄씩 분석하다가 head 내 script 태그를 만나면 js파일을 다운받아야 한다고 이해

html을 분석하는 것을 멈추고 필요한 js 파일을 서버에서 다운 받아서 실행한 후 다시 분석 시작하게 됨

 

만약, 인터넷도 느리고 js 파일 사이즈도 크다면 사용자가 웹사이트를 보는데까지 많은 시간이 소요 될 것

-> script를 그냥 head에 포함하는 것은 좋지 않음

 

 

-body 끝 부분에 script 를 추가하는 경우

 

브라우저가 html 파일을 다운받고 parsing 해서 페이지가 준비 된 이후에 script를 서버에서 받아오고 실행

 

장점: 사용자가 js 파일을 받기 전에도 html이 준비가 되어서 기본적인 html 컨텐츠를 빨리 볼 수 있음

 

단점: 웹사이트가 javascript에 의존적이라면(즉, 사용자가 의미 있는 컨텐츠를 보기 위해서 javascript를 이용해 서버에 있는 데이터를 받아와야 한다면) 사용자가 정상적인 페이지를 보기 위해 서버에서 js 파일을 받아오는 시간, 실행하는 시간을 모두 기다려야 함

 

 

-head 내 async

 

head 내 script 태그를 이용하되 async라는 속성값 사용

async: Boolean 타입의 속성값, 선언하는 것만으로도 true로 설정됨

 

브라우저가 html을 다운받아서 parsing하다가 async가 있으면 병렬로 js파일을 다운받자고 명령

이후 다시 parsing 하다가 js 파일의 다운로드가 완료되면 parsing을 멈추고 다운로드된 js 파일을 실행한 후 나머지 html을 parsing

 

이 방법에서는 정의된 스크립트 순서와는 상관 없이 다운로드가 먼저 된 파일을 우선 실행

만약 우리의 javascript가 순서에 의존적이라면(즉, b.js 파일을 실행하는데에 있어서 a.js 파일이 선행되어야 한다면) 문제 발생 가능성 있음

 

장점: js 파일을 다운로드 받는 시간을 절약할 수 있음

단점: html이 다 parsing 되기도 전에 병렬로 다운로드 된 js 파일이 실행되기 때문에 만약 js 파일에서 queryselector를 이용해서 dom 요소 조작한다면 우리가 원하는 html 요소가 아직 정의되어 있지 않아 위험할 수 있음,

parsing 하는 동안에 언제든지 js를 실행하기 위해 멈출 수 있기 때문에 사용자가 페이지를 보는데 그만큼 시간이 더 걸림

 

 

-head 내 defer(가장 좋은 옵션)

 

head 내 script 태그를 이용하되 defer 옵션 사용

 

parsing을 하다가 script 태그의 defer를 보면 js 파일을 다운로드 받자고 명령만 시켜놓고 나머지 html을 마저 parsing

parsing을 먼저해서 사용자에게 페이지를 보여준 후, 다운로드된 js 파일을 실행

 

parsing 하는 동안 실행할 js를 다 다운받고, parsing이 끝난 이후에 실행하기 때문에 우리가 정의한 순서대로 스크립트가 실행될 것