'HTML에서 외부 script를 가져오려면 어디에 위치시켜야 할까?'
초반에 여러 강의를 클론하면서 그냥 body 맨 밑에 위치시키길래 막연하게 '그래야 하는 구나~' 했다.
하지만! async, defer 등의 여러 용어들을 만나고 해당 부분에 대한 자신감이 너무 없다고 느껴 블로그에 정리하며 제대로 공부하기로 했다!
우선 사용자가 browser에서 다운받은 HTML 파일을 분석하는 것을 parsing이라고 한다! 브라우저는 HTML 파일의 처음부터 아래로 파싱하는데, 외부 script 태그가 보이면 HTML 파씽, 즉 DOM 생성을 중단하고 해당 javascript를 다운받아 실행하고 다시 파싱을 진행하는 방식으로 사용자에게 화면을 보여준다. 그리고 외부 script의 js 파일의 설치되는 걸 fetching, 실행되는 걸 executing 이라고 한다.
이번엔 외부 script를 HTML에 넣는 각각의 위치마다 어떻게 다르게 파싱하는지, 각각의 위치마다 어떤 장단점을 갖는지, 결과적으로 나는 script를 어디에 위치시키는 게 가장 적합할 지 알아보겠다!
1. head에 넣어 버리기~
이렇게 head 안에 script가 포함된다면, 사용자에게 어떤 순서로 페이지가 구현될까?
위 그림처럼 사용자의 컴퓨터가 브라우저의 HTML 파일을 파싱하다가, head에 있는 script 태그에 멈춰 서버가 제공하는 javascript 파일을 패칭 받는다. js 파일을 읽는 동안 컴퓨터는 파싱하기를 멈추고 다운된 파일을 실행한 뒤에야 다시 파싱을 진행해 사용자에게 화면을 제공한다.
그러나, js 파일이 여러 정보를 갖고 있거나 사용자의 컴퓨터가 느리다면 로딩 시간이 길어지는 단점이 존재한다!!
2. body 맨 밑에 넣어 버리기~
그래서, 나는 이렇게 body 태그의 맨 밑에서 외부 js 파일을 패칭하는 방식을 사용했다.
이러면 사용자가 HTML 파일을 쭉 파싱해 페이지 준비가 완료되는 시점에 script 태그를 만나 서버에서 실행시키는 방식을 사용한다.
이것의 장점은, 사용자가 js 파일을 다운 받기 전에 이미 준비된 해당 페이지 내용을 열람할 수 있다는 것이다.
하지만, 이 방식은 javascript에 지나치게 의존적이기 때문에 받아와야 하는 js 파일이 너무 크다거나 문제가 생기면 같이 문제가 생길 수 있다는 단점이 있다.
3. head에 넣지만 async 속성 사용하기~
이 방식은 script 태그에 `async`라는 boolean 타입의 속성을 주어 사용하는 방식이다.
이 방법은 사용자의 컴퓨터가 브라우저의 HTML을 파싱하다가 async 파일을 보면 js 파일의 패칭과 HTML 파싱을 병렬적으로 동시에 진행한다! 그렇게 js 파일의 다운로드가 완료되면, HTML 파싱을 멈추고 js 파일을 실행한 뒤, 나머지 HTML 파일을 파싱하는 방식이다.
이를 통해 다운로드 받는 시간을 절약할 수 있다는 장점이 있다.
하지만, 1번과 마찬가지로 HTML 파싱보다 js 실행이 먼저되기 때문에, js 파일에서 DOM 요소를 조작하는 것이 제한되는 등의 문제가 생길 수 있다. 그리고, 개발자가 정의한 순서와 상관없이 설치가 먼저된, 즉 HTML 파일에서 상위에 위치한 파일 순서로 실행되는 문제가 발생할 수 있다.
4. head에 넣지만 defer 속성 사용하기~
이 방식은 역시 boolean 타입의 defer 속성을 이용해 head 태그 안에 script 태그를 넣어주는 방식이다.
이 방식에선 script 태그가 head에 위치하고 있기 때문에 3번과 마찬가지로 HTML 파싱 초기에 js 파일의 패칭이 시작된다. 하지만 가장 큰 차이점은 파싱이 끝나고 js 파일이 실행된다는 점이다.
만약 여러 js 파일을 패칭하더라도, HTML 파싱이 완료된 후에 js 파일이 실행되기 때문에 개발자가 원하는 방식대로 사용자에게 구현하리라는 안정감이 있는 방식이다!
결론, head 태그에 defer 속성이 포함된 script를 위치하는 방식이 HTML에서 javascript 파일을 가져오는 가장 좋은 방법이 될것!
파싱, 패칭, defer 등 여러 가지 지식을 정리할 수 있는 시간이었다!
