자바스크립트 개요

고연주·2020년 9월 15일

console.log('Hello World!'); // 화면에 Hello World 출력

API (브라우저가 이해할 수 있는 함수들)

자바스크립트 공식 사이트

head 태그 안에 script 태그가 있는 경우

<head>
	<script src="main.js"></script>
</head>

body 태그 끝에 script 태그가 있는 경우

parsing HTML -> fetching js(서버에서 받아옴) -> executing js
HTML 파싱이 끝나고 페이지가 준비된 다음에 js 파일을 서버에서 받아오고 실행하게 됨
사용자가 기본적인 HTML 컨텐츠를 빨리 볼수 있음, 웹 사이트가 자바스크립트에 의존적이라면 js 파일을 서버에서 받아오고 실행되기까지 기다려야 되는 단점이 있음

<body>
	<div></div>
	<script src="main.js"></script>
</body>

asyn 옵션 사용

boolean 타입의 속성값이기 때문에 선언하는 것만으로도 true로 설정
브라우저가 html을 다운로드 받아서 파싱을 하다가 asyn을 만나면 병렬로 js 파일을 다운로드 받자라고 명령만 해놓고 다시 파싱을 하다가 js 파일이 다운로드가 완료가 되면 그때 파싱하는 것을 멈추고 다운로드된 js 파일을 실행하게 됨, 실행을 다 하고 나머지 html을 파싱하게 됨
body 끝에 사용하는 것보다는 fetching이 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있음, 하지만 자바스크립트가 html이 파싱 되기도 전에 실행되기 때문에 자바스크립트에서 쿼리셀렉터를 이용해서 돔요소를 조작한다 그러면 조작하려고 하는 시점에 html이 우리가 원하는 요소가 아직 정의되어 있지 않을 수 있음
여러개의 js 파일이 선언되어 있을 경우 먼저 다운로드 되는 파일을 실행하므로 순서에 의존적이라면 문제가 될 수 있음

<head>
	<script asyn src="main.js"></script>
</head>

defer 옵션 사용(가장 좋은 옵션)

HTML 파싱을 하다가 defer를 만나면 js 파일을 다운로드 받자라고 명령만 시켜놓고 나머지 HTML을 끝까지 파싱하게 됨, 마지막에 파싱이 끝난 다음에 다운로드 되어진 js 파일을 실행

<head>
	<script defer src="main.js"></script>
</head>