자바스크립트 태그 위치 4가지(async, defer)

자바스크립트에서 스크립트 태그 추가 4가지 방법

가장 효율적인 방법은 무엇인가?

스크립트 태그를 head 안에 사용하는 것은 좋은 방법이 아니다. 그래서 쓰는 방법이 body 닫는 태그 위에 사용하는데 역시 단점이 있다. async 속성과 defer 속성을 사용하는 방법도 있다. 결론은 어떤 방법이 가장 좋을까

목차

1. 스크립트를 head에 포함하는 방법
2. 스크립트를 body에 포함하는 방법
3. async 속성
4. defer 속성
5. 결론

async, difer

1. 스크립트를 head에 포함하는 방법

사용자가 html 파일을 다운로드할 때 브라우저는 한 줄 한 줄 분석(parse)한다
그렇게 분석한 것을 css와 병합해서 돔 요소로 변환한다.
html을 분석하는 과정에서 스크립트 태그를 만나게 되면 html 분석하는 것을 멈추고 js파일(script. js)을 다운로드한다. 자바스크립트 파일을 서버에서 다운로드하여서 이것을 실행한 다음에 다시 분석을 시작한다

이 방법의 단점은 확실하다. js파일의 용량이 크면 사용자가 웹사이트를 보기까지 많은 시간이 소요될 수밖에 없다.
그러므로 스크립트를 헤드의 포함하는 것은 좋은 방법이 아니다.

2. 스크립트를 body에 포함하는 방법

스크립트를 head에 넣었을 때의 단점 때문에 다음으로 생각하는 방법은 body 안쪽(그것도 제일 아랫부분)에 스크립트를 추가하는 방법이다. 이 방법을 쓰면 브라우저가 html을 다운로드 및 분석해서 페이지 준비가 된 이후에 이 스크립트를 만나게 되므로 그때 스크립트를 서버에서 다운로드하고 실행한다
이 방법을 쓰면 브라우저가 js파일을 다운로드하기 전에 웹페이지가 사용자들에게 이미 준비가 되기 때문에 사용자가 페이지의 컨텐츠를 볼 수 있다

그러나 이 방법의 단점이 있다. 웹사이트가 자바스크립트에 의존적이라면(js파일을 다운로드해야 정상적인 페이지를 볼 수 있다면) 정상적인 페이지가 보일 때까지 js파일을 다운로드하는 시간과 실행하는 시간을 모두 기다려야 한다.

3. async 속성

async 는 불리언 타입의 속성값이다. 선언하는 것만으로 true로 설정이 되어 async 옵션을 사용할 수가 있다. 브라우저가 html을 다운로드하고 분석하다가 async를 보게 되면 병렬로 js 파일을 다운로드한다. js가 다운로드가 완료(그때까지는 병렬로 parsing)가 되면 그때 분석을 멈추고 다운로드된 js파일을 실행한다. 실행하는 동안 html parsing을 멈춘다.
실행을 다하고 나서 나머지 html을 parsing한다.

<script async src="script.js"></script>

여기에 큰 단점이 있다. 병렬적으로 일어나기 때문에 다운로드하는 시간을 절약할 수 있지만 자바스크립트가 html이 parsing 완료되기 전에 실행이 되기 때문에 자바 스크립트 파일에서 돔 요소를 조작한다면 조작하려는 시점에 html이 원하는 요소가 아직 정의되어 있지 않다.

자바 스크립트를 실행하는 시점에 html이 멈추기 때문에 사용자가 페이지를 보는데 여전히 시간이 걸린다.

4. difer 속성

head 안에 defer라는 옵션을 쓰게 되면 브라우저 parsing을 하다가 스크립트 defer를 발견하고는 다운로드 명령만 해 놓고 나머지 html을 끝까지 parsing 한다. 그리고 parsing이 끝난 다음에 다운로드된 자바 스크립트를 실행한다. html을 parsing 하는 동안 필요한 자바 스크립트를 모두 다운로드하여놓고 html의 parsing을 먼저 해서 사용자에게 페이지를 보여 준 다음에 자바 스크립트를 실행한다.

<script defer src="script.js"></script>

5. 결론

head 안에 defer 옵션을 이용해서 쓰는 방법이 효율적이다.