Script 삽입 위치

head나 body 태그 중 어디에 script 태그 넣느냐에 따른 차이를 알아 보았다.

추가로, script 태그에 속성으로 defer,async가 있는데, 이 친구들이 어떤 역할을 해주는지 알아보자.

 

1. head 태그에 포함시킬 경우

- HTML 파싱하던 중에 JS 파일을 받아오고 실행한뒤, 다시 HTML을 파싱을 한다.

- JS 파일 크기가 클 경우 렌더링이 오래 걸려서 사용자가 페이지를 보기까지 너무 오래 걸릴 것이다.

- DOM 객체 생성 전에 HTML을 조작하려고 문제 발생 가능.  script가 존재하지않는 dom을 건드리는 dom API을 사용한다면 에러가 발생할 수 있다.

2. body에 포함시킬 경우(body 내 하단에 추가)

- HTML 파싱을 먼저 진행한 후 JS파일을 받아오고 실행한다.

- HTML 파일이 큰 경우에는 JS가 포함된 의미있는 이벤트및 콘텐츠를 볼려면 너무 오래 걸릴 것이다.

script 태그를 head 태그 내부에 정의하고, defer와 async 중 하나를 추가하면 HTML을 파싱하면서 파일을 비동기적으로 다운로드 할 수 있음. 

3. async 속성 

- 병렬적으로 파싱&스크립트 다운로드 해서 다운로드 시간은 절약된다.

- JS를 실행은 JS파일 로드가 완료가 된 직후에 진행되고, 이때 HTML 파싱을 중지하게 되고 JS실행이 끝나면 다시 파싱이 재시작된다.

그래서 HTML이 모두 실행되기 전에 JS가 실행된다.

다수의 스크립트 파일을 다운로드 받게 된다면, 다운로드가 완료되는 순으로 JS파일을 실행하기 때문에 순서에 상관없이 실행 된다.

순서 보장이 필요한 script 태그라면 문제가 될 수 있다.

4. defer 속성

- 병렬적으로 파싱&JS 불러오기, 파싱이 모두 끝나면 JS실행

- 다운로드 시간 절약 & JS파일 모두 다운로드 해두고 파싱이 끝난 후 순서대로 JS를 실행해서 

스크립트 적힌 차례대로 스크립트 실행 가능.

 

되도록이면 script 태그는 body태그 하단에 or defer속성을 추가해주자!

 

참고글

[JS] Script삽입 위치(head, body, async, defer 비교)