how to load .js file

자바스크립트를 어떻게 포함하는게 더 효율적일까?

 

스트립트를 head에 포함시키는 방법

: 웹브라우저가 한줄한줄 읽어나가면서 script태그가 나오고 src="" 의 파일을 로드한다.

단점 : js 파일이 너무 많은 경우 사용자가 웹사이트를 보는데 까지 오래걸린다.

 

 

 

Body태그 끝에 script태그를 두는 방법

: 웹페이지가 거의 준비된 다음에 스크립트를 로드

단점 : 웹사이트가 자바스크립트에 의존적이라면 사용자가 정상적인 페이지를 보기전까지는 웹사이트가 자바스크립트를 페치하고 기다리는 시간이 발생

 

 

 

 

head + asyn

: asyn 는 boolean타입의 속성값이어서 설정만해도 true로 되서 사용할 수 있다. 웹 브라우저는 

asyn가 있으면 병렬로 js파일을 다운로드 하게 된다.

html을 파싱하다가 asyn을 만나면 파싱과 js파일 다운로드를 병렬로 진행하게 된다. 그러다 js파일의 다운로드가 완료되면 html 파싱을 중지하고 js를 실행한 다음에 다시 html을 파싱한다.

단점 : html을 완전히 파싱하지 않은 상태에서 js가 실행되기 때문에 일부 요소가 정의되지 않은 상태에서 쿼리셀렉트같은걸루 실행하려할때 위험이 생긴다. 그리고 여전히 완전한 웹브라우저를 보기까지 좀 느리다.

 

장점 : js다운받는 시간 절약

 

 

 

 

 

head + defer

: defer 속성은 js파일을 다운받으라 명령하고 끝까지 파싱한다음(page가 준비된 다음) 다운로드한 js를 실행시킨다.

 

 

 

 

 

로드해야할 js파일이 여러개인 경우

Async를 사용하면 순서에 상관없이 먼저 로드된것을 실행하기 때문에 순서에 의존적인 파일이라면 async를 사용하지 않는것이 좋다.

 

 

반면 defer를 사용하면 모두 로드해놓고 순서대로 실행되기 때문에 순서에 의존적인 파일이라도 문제 없다.

 

 

 

 

 

저는 head + defer 방식을 선호합니다.

 

 

참조 : youtube 드림코딩엘리 javascript 강의