[Javascript] Javascript 기초 (ES5+) by 드림코딩 1. async / defer

1.async 와 defer

1-1 script 태그의 위치

💭script 태그를 head 태그 안에 포함시킬 경우?

☑️ 브라우저가 html을 parsing(한 줄씩 읽는)하는 도중에 script 태그를 만나면 필요한 Javascript 파일을 다운로드 하는데 이 파일의 크기가 클 경우, 사용자가 웹 사이트를 보는데까지 너무 오래걸릴 수 있다.

💭script 태그를 body 태그 안에 포함시킬 경우?

☑️
장점 : 사용자가 html 컨텐츠를 빨리 볼 수 있다
단점 : 자바스크립트의 의존을 하는 웹사이트라면 사용자가 정상적인 페이지를 보기 전까지 서버에서 자바스크립트를 불러오는데까지 시간이 걸린다.

💭 head + async

☑️
장점: fetching이 parsing(코드를 위에서 아래로 차례대로 읽어들임)이 진행되는 동안 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다.

단점: (1) 자바스크립트가 html이 parsing되기도 전에 다운로드가 완료되어 실행되기 때문에 DOM요소를 조작하려고 하면 html 요소가 아직 정의되어 있지 않을 경우가 있다.

(2) parsing이 진행되는 동안 자바스크립트를 실행하기 위해서 중간에 멈춰야하는 구간이 생긴다. -> 페이지를 보는데 시간이 소요된다.

(3) 만약 자바스크립트가 순서가 중요시 된다면 다운로드가 완료되는 대로 실행이 되는 async는 어울리지 않는다.

💭 head + defer

parsing이 진행되면서 defer가 발견되면 fetching(자바스크립트 파일 다운로드)이 병렬적으로 진행되면서 parsing이 완료되는 순간 자바스크립트가 실행된다.
그런 다음, 스크립트가 순서대로 실행된다.
정리한 순서대로 스크립트가 실행되기 때문에