JavaScript란
JavaScript는 웹 페이지를 위한 스크립트 언어로 만들어졌다.
하지만 Node.js를 이용하면 브라우저가 아닌 서버 환경에서도 사용할 수 있다.
- 가볍고, 인터프리터를 사용한다
- 웹에서 동적으로 변경되는 컨텐츠를 만들 수 있다
<script>태그를 이용해서 웹 페이지에 JS코드를 추가할 수 있다
인터프리터 언어는 한 줄씩 명령을 처리한다. 코드가 위에서 아래로 실행되고 코드 실행 결과가 즉시 반환된다.
스크립트 로딩 문제
브라우저에서 웹 페이지에 접속하면 브라우저 탭 내에서 HTML, CSS, JS 코드를 실행하여 웹 페이지를 출력한다.
그런데 JavaScript를 사용해서 특정 DOM을 조작하려고 할 때, 해당 요소를 포함한 HTML 코드보다 JavaScript를 먼저 불러와버리면 코드가 올바르게 동작하지 못할 것이다.
<script>를 맨 뒤로
<body>
<div>
/* ... */
</div>
<script src="js/script.js"></script>
</body><script>를 맨 뒷부분, 즉 </body> 태그 바로 앞에 배치하면 모든 HTML을 읽은 후에 스크립트를 불러오게 되므로 문제를 해결할 수 있긴 하지만...
이 방법은 HTML DOM을 모두 불러오기 전에는 스크립트의 로딩과 분석이 완전히 중단되기 때문에 사이트 속도가 느려지는 성능 문제가 발생한다. 이를 해결하기 위한 것이 async와 defer 속성이다.
async와 defer
async와 defer 속성이 있는 스크립트는 백그라운드에서 다운로드되기 때문에 다운로드 중에도 HTML 렌더링을 멈추지 않는다.
async와 defer의 차이점은 스크립트의 실행 시점이다. async는 스크립트의 로드가 완료되자마자 실행되지만 defer는 HTML의 로드가 완료되면 실행된다.
따라서 defer 속성을 사용해야 DOM이 있을 때 스크립트가 실행되는 것을 보장할 수 있다.
defer 속성
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script.js"></script>defer 속성이 있는 스크립트들은 HTML에 추가된 순(상대순, 요소순)으로 실행된다. 따라서, jquery가 script보다 먼저 실행되는 것이 보장되며 html 콘텐츠가 모두 로드된 후 실행된다.
