html에서 javascript파일을 포함할 때
어떤경우에 어떻게 포함시켜야 하는지에 대해 4가지 경우 및 async와 defer속성을 추가했을 경우 어떻게 변하는지에 대해 공부해봤다.
1. head 안에 script를 넣는 경우
html을 순서대로 parshing하다가 script를 발견한 순간 parshing을 멈추고
js파일을 서버로부터 다운로드 및 실행한 뒤 나머지 parshing을 시작하게 된다.
단점: js파일의 크기가 크거나 인터넷이 느릴 경우 웹사이트 구현까지
오랜 시간이 걸릴 수 있다.
2. /body 앞에 script를 넣는 경우
html parshing을 모두 마친 뒤 페이지가 준비되면
js 다운로드 및 실행이 진행되기 때문에 페이지 구현 측면에서는
이전 경우보다 더 빠르게 볼 수 있게된다.
단점 : 웹사이트가 js에 의존적이고 파일이 많을 경우,
완전히 구현된 페이지를 보기까지 오래걸릴 수 있다.
3. head 안에 asyn를 포함
html을 parshing하다가 script asyn을 발견하게되면
parshing을 멈추는게 아닌 병렬구조로 동시에 다운로드를 시작하게 된다.
다운로드가 완료되면 parshing을 멈추고 js파일을 실행한 뒤 나머지에 대해
parshing을 진행하게 된다.
단점 : html페이지 구현 순서에 영향을 많이 받는다.
html페이지 구현보다 js파일 실행이 먼저 되기 때문
4. head 안에 defer를 포함
html을 parshing하다가 script defer를 발견하게 되면
3번과정과 마찬가지로 병렬적으로 다운로드를 진행하게 된다.
3번과의 차이점이라면 다운로드가 완료되더라도 바로 실행이 되는게 아니라
html parshing이 다 끝난 후에 실행되게끔 한다는 것.
❓그렇다면 언제 어떻게 사용해야 하는 것일까
일반적인 스크립트 실행과 aync,defer 실행에는 몇가지 확인사항이 필요하다고 한다.
1.script요소는 어디에 위치하는가?
외부소스 js파일이 닫는 /body 요소 바로 앞에 있으면, 또 파일의 크기나
인터넷 속도가 방해될 수준이 아니면 굳이 async 또는 defer 속성을
쓰지 않아도 상관없다.
2.script 자체가 포함되어 있는가?
다른 파일들에 종속적이지 않은 js파일의 경우 async 속성이 유용하다.
파일의 실행 지점 여부가 필요하지 않기때문!
3. script가 작고 종속성을 가지는가?
script가 비교적 작고 다른파일에 의존하는 경우 인라인으로 정의하는게 더 유용할 수 있다.
❗️번외로 다수의 script를 받게 될 경우 async와 defer 두가지 차이를 알아보자
1. async
html parshing중에 여러가지의 script를 동시다발적으로 다운받게 되고
순서에 상관없이 먼저 다운로드된 js파일부터 실행되게 된다.
2. defer
1번과는 동일하게 동시에 다운로드가 진행되지만 모든 다운로드가 완료 된 시점에서 순서대로 js파일이 실행되게 된다.
