web 5 : script의 위치 + use strict

1. <head>안에 넣기

웹 브라우저는 html 파일을 한 줄씩 읽으면서 dom 요소로 변환하는데

head 안에 script 태그를 포함하면 필요한 js파일을 다운 받고 실행한 다음 parsing 한다.

js파일 사이즈가 클 경우 사용자가 웹사이트를 볼때 많은 시간이 걸리게 된다.

2. <body>안에 넣기

브라우저가 html을 따라 읽으며 parsing하고 fetching, executing 한다.

(맨 마지막에 js파일을 읽는다)

웹사이트가 js에 의존적이라면 서버에서 js를 받아오고 실행하는데 시간이 걸린다.

3. <head>안에 넣고 asyn 옵션을 사용한다.

js파일을 다운받을 것을 명령해놓고 마저 parsing 한다.

먼저 다운로드된 js파일을 실행한다.

4. <head>안에 넣고 defer 옵션을 사용한다.

js파일을 다운받을 것을 명령해놓고 마저 parsing 한다.

parsing하는 동안 필요한 js파일을 모두 다운로드 받고 순서대로 실행한다.

asyn vs defer

asyn은 먼저 다운로드 되는 js를 실행한다

정의된 스크립트 순서에 상관 없이 먼저 다운로드된 js를 사용하므로

순서에 의존적이라면 문제가 일어난다.

defer은 parsing하는 동안 필요한 js를 다 다운받고

순서대로 실행하기 때문에 정의한 순서가 지켜진다.

use strict

자바스크립트 파일에 'use strict'; 를 쓰는 이유.

자바스크립트는 매우 유연하기 때문에 선언되지 않는 값을 사용하는 등 비상식적인 실행을 할 가능성이 있는 언어이다.

strict 모드로 개발을 하면 선언되지 않는 값을 사용시 error가 발생하여 비상식을 막는다.

winterrosy