head에 넣어주기
이렇게 head 안에 자바 스크립트를 넣을 경우에는
사용자가 html 파일을 다운로드를 받고 브라우저가 한줄씩 분석 한다
html을 파싱하다가 script가 태그가 있으면 html 파싱을 잠시 멈추고
필요한 js파일을 서버에서 다운받고 다시 html 파싱을 한다.
단점
js파일이 큰 경우나, 인터넷이 느리면 속도가 매우 느림
body에 넣어주기
바디 제일 끝부분에 스크립트를 추가하는 경우에는
html을 파싱해서 페이지가 준비가 된 다음에 script를 만나 서버에서 받아와 실행함
단점
웹 사이트가 자바스크립트에 의존적이면 사용자가 의미 있는 컨텐츠를 보기 위해서는
ex) 자바스크립트로 서버에서 데이터를 받아오기, DOM요소를 꾸미기
사용자가 정상적인 페이지를 보기 위해서는 서버에서 자바 스크립트를 받아오고 실행하는
시간을 기다려야함.
head + asyn
script 태그를 이용하되 asyn이라는 속성값을 사용하는 방법
asyn는 boolean값의 속성값이기 때문에 선언하는 것 만으로 true로 선언됨.
asyn을 사용하면 html을 다운받아 parsing을 하다가 asyn이 있으면
병렬로 js 파일을 다운받자고 명령을 하고 다시 parsing을 함
js파일이 다운로드가 되면 그때 파싱을 멈추고 다운로드 된 js 파일을 실행함
실행한 다음에 나머지 html을 parsing 해줌.
장점
fetching이 parsing하는 동안 병렬적으로 일어나기 때문에 다운로드 시간 절약 가능
단점
사용자가 페이지를 보는데 시간이 걸릴 수 있음.
head + defer
parsing을 하다가 defer이 있으면 js파일을 다운받자고 명령을 하고 나머지 html을
끝까지 parsing을 함, 마지막에 parsing이 끝나면 자바스크립트를 실행함.
defer은 parsing하는 동안 js파일을 다 받아놓고 순서대로 실행함
