[JavaScript] html에서 js파일을 가장 효율적으로 포함하는 방법

이 글은 다음의 유튜브 영상을 참고하여 작성하였다.

https://www.youtube.com/watch?v=tJieVCgGzhs&t=1s 

 

1. head

 

위 방법은 코드 순서대로 html코드를 parsing하다가 js파일을 만나면 서버에서 다운받아 실행한 다음에 다시 parsing을 시작한다.

 

• 단점: js파일의 크기가 너무 크고 인터넷이 느리다면 웹페이지를 로딩하는데까지 오래걸린다.

 

2. body

 

위 방법은 브라우저가 html 코드를 파싱해서 준비가 끝난 후에 마지막에 script를 받아오는 방식이다.

 

• 장점: js파일은 받아오기 전에도 페이지의 컨텐츠를 보여줄 수 있다.
• 단점: 만약 웹사이트가 js에 매우 의존적(의미있는 컨텐츠를 보려면 js가 필요하다면)이라면 의미가 없다.

 

3. head + async

 

async는 bullean 타입의 속성값이기 때문에 선언만 해도 True로 선언된다. 이 옵션을 쓰면 js파일을 병렬적으로 다운(fetching)받고 다운로드가 끝나면 parsing을 잠시 멈추고 js파일을 실행한다. 그리고 나머지 html 파일을 parsing한다.

 

• 장점: body 끝에 사용하는것 보다는 다운로드 받는 시간을 절약할 수 있다.
• 단점: js가 html이 파싱되기도 전에 실행되기 때문에 만약 js파일에서 query selector를 사용해서 dom을 조작하려고 한다면 우리가 원하는 요소가 아직 정의되어있지 않을 수 있다. 또한, js를 실행하기 위해서 파싱을 멈출 수 있기 때문에 사용자가 페이지를 보는데 시간이 오래 걸릴 수 있다.

 

 

실행 순서: b -> a -> c (b보다 a가 먼저 선행되어야 한다면 문제가 될 수 있는 부분)

4. head + defer (가장 효율적)

 

defer이라는 옵션을 정의하면 html파일을 파싱하는 동안 js파일을 다운(fetching)받자고 명령을 내리고 html 파싱이 끝나면 js파일을 실행한다.

 

• 장점: 가장 좋은 옵션. html을 파싱하는 동안 js파일을 다운 받고 파싱이 끝나는대로 실행하기 때문에

 

 

실행 순서: a -> b -> c (우리가 정하는 순서대로 실행됌)