✔ 사전스터디 JavaScript 내용은 유튜버 드림코딩 엘리님의 강의를 참고하였다.
JavaScript??
- 자바스크립트란 객체 기반의 프로그래밍 언어이다.
- 웹 브라우저에서 유일!!하게 구동되는 프로그래밍 언어이다.
- 웹의 기본 3구성 중 정적인 HTML, CSS와 달리 동적인 언어이다.(움직이거나 깜빡이는 요소 등....)
HTML과 연결하기
- Javascript 파일을 HTML과 연결할 때, 다음과 같은 방법들이 있으며 어떤 방법이 가장 효율적인지 알아보자!
1. head tag에 삽입
-
위 그림과 같이 브라우저는 HTML과 CSS의
parsing(해석, 분석)을 통해 코드들을 한 줄씩 읽으면서 웹의 구조를 파악하게 된다. -
하지만 이러한
parsing과정은, 중간에<head>태그에 삽입 된<script>태그의javascript파일을 가져온 후 실행하는 동안 멈추게 된다. -
위와 같은 이유로 사용자에게 보여지기까지의 과정이 상대적으로 느리다. 또한 만일
javascript파일이 무겁다면 그 속도는 더욱 늦어질 것이다. 때문에 이 방법은 적절하지 않다.
2. body tag에 삽입
-
가장 보편적인 방식으로,
<body>태그의 가장 끝 부분에<script>태그를 추가한다. -
장점:
<head>태그에 삽입했던 방법과 달리parsing도중 멈추지 않기 때문에 상대적으로 빨리 볼 수 있다. -
단점: 만일 해당 웹사이트가
javascript에 굉장히 의존적이며javascript파일이 매우 무겁다면, 이 또한 사용자에게 보이기까지 시간이 오래 걸린다.(fetching,executing시간 증가)
3. head 태그 안 삽입 및 async 속성 부여
-
<head>태그 안,boolean타입의async속성값을 부여한다. -
특징: HTML이 파싱되는 동안,
javascript는 병렬로fetching이 이루어지며 파일이 실행되는 동안parsing이 멈춘다. -
장점: 병렬적으로
fetching이 되기 때문에parsing전체의 시간을 줄일 수 있다. -
단점: html요소에 의존하는
javascript파일의 경우, html 및 css 요소가parsing되기 전에 실행될 가능성이 존재하므로 위험하다. 또한 정의된 js순서에 상관없이fetching(다운로드)되는 순서로 파일이 실행되기 때문에 순서에 의존적인javascript파일의 경우 문제가 발생할 수 있다.
4. head 태그 안 삽입 및 defer 속성 부여 (가장 선호)
-
<head>태그 안,boolean타입의defer속성값을 부여한다. -
특징: HTML이 파싱되는 동안,
javascript는 병렬로fetching이 이루어지며parsing종료 후, 파일이 실행된다. -
장점: 웹 페이지의 실행 시간이 가장 짧다. (
parsing이 중단되는 구간이 없음) 또한 정의한javascript순서대로 실행이 되기 때문에 async보다 상대적으로 안전한다.
