우리는 스크립트를 HTML에서 body태그 안쪽 하단에 script태그로 임포트를 한다. 그러나 이렇게 하면 최적의 상태는 아니다.
크롬의 개발자 독 - 퍼포먼스 탭 => 페이지를 로드할 때 브라우저의 동작을 자세히 알 수 있음, 스크립트가 어떻게 로드-분석-실행 되는지 알 수 있음
어쨋든 스크립트를 HTML에서 import하는거는 HTML의 구문 분석이 거의 끝난 후에 JS파일을 요청하고 실행하기 때문에 시간지연이 발생한다
HTML 파일 로드 후 Script의 실행 사이에 시간 간격이 존재하는 것이다.
HTML 파일 분석 이후 Script가 실행하는 순서는 당연하다. 이 순서를 바꾸는 것이 아니라, 둘 사이에 존재하는 불필요한 시간 소모를 줄여야 한다.
따라서 HTML 구문 분석 이후 Script를 로드하는 것이 아니라 최대한 빨리 Script를 로드하고, HTML 구문 분석이 완료된 후 실행해야한다.
HTML의 Head태그에서 Script를 임포트 하면 Script가 빠르게 로드되고, 실행도 빨리 되지만, HTMl 구문 분석이 완료되지 않은 상태에서 Script의 구문 분석을 시도했기 때문에 오류가 발생할 수 있다.
<script src="블라블라" defer> </script>defer 키워드를 사용하면, script파일을 미리 로드하지만, 실행은 HTML 구문 분석이 끝난 이후에 진행되어서 오류를 예방할 수 있다.
하지만 어떤 스크립트는 HTML에 의존적이지 않고 독립적으로 실행하기도 한다. 이러한 경우에는 async 키워드를 사용한다.
<script src="블라블라" async> </script>async 키워드를 사용할 경우 스크립트를 로드 후 바로 실행하게 된다. 따라서 HTML 구문 분석이 진행중에 위의 코드를 만나면 중지하고 script를 로드 후 실행한 뒤 종료되면 다시 HTML 구문 분석을 시작하게 되는 것이다. 보통 이런 것은 사용자와 상호작용하는 코드가 아닌, background server와 통신하는 경우에 사용한다.
위 두개의 키워드는 외부 Script 파일을 import 하는 경우에만 이용 가능하다. 인라인 스크립트의 경우에는 자신의 상황(스크립트가 HTML에 의존적 또는 독립적)에 맞게 Head태그 또는 Body 태그의 끝에서 작성해야 한다.
간단한 웹 프로그램은 이러한 import 방식이 결과의 visible 한 결과의 차이를 이끌진 못하지만, 실제 웹 서버에서 호스팅하는 더 큰 웹 프로그램의 경우 이러한 사소한 차이가 사용자 경험에 큰 차이를 만든다.
