JavaScript 기초1

Web API : Web Application Programming Interface

브라우저가 이해하는 함수라는 의미

 

브라우저가 HTML 페이지를 다운받아서 실행하는 순서

위에서 부터 한 줄 씩 분석해서, html 과 css 를 병합해서 파싱한 후 브라우저에 정보를 보냄.

 

Head 안에 스크립트가 포함되었을 때의 실행 순서

html 코드를 한 줄 씩 읽어서 파싱하다가, script 가 보이면 html 파싱을 멈추고 script 를 다운로드하고 실행 한다.

그 후 다시 html 을 파싱하여 브라우저에 정보를 전달한다.

<script src="../test.js"></script>

이렇게 했을 경우 js 파일이 크고 인터넷 속도가 느리다면 사용자가 html 페이지를 보기까지 시간이 걸린다.

 

따라서, body 태그의 가장 마지막에 script 를 넣는 방법이 있다.

html 이 전부 다 파싱되고 난 후에 script 를 다운로드 > 실행하기 때문에, 사용자가 기본적인 html  컨텐츠를 빨리 볼 수 있다. 하지만 html 페이지가 js 에 의존적이라면 정상적인 페이지 로드가 되지 않을 수 있다.

또한 js 를 실행하는 시간까지 기다려야 한다.

 

 

async 를 활용했을 때

<script async src="../test.js"></script>

html 코드가 파싱될 때, 스크립트 다운로드와 실행을 동시에 한다.

브라우저가 html 을 다운로드하고 파싱하다가, async 가 보이면 파싱을 멈추가 스크립트를 다운로드 한다.

다운로드가 끝나면 실행하고 나머지 html 을 파싱한다.

 

parsing HTML > fetching js, executing js > parsing HTML

 

다수의 스크립트가 있을 경우, 스크립트를 선언한 순서에 상관없이 다운로드가 끝난 스크립트를 실행한다.

 

장점 : 빠르다.

단점 : 스크립트 선언에 의존적이라면 문제가 발생할 수 있다. html 파싱이 끝나기 전에 스크립트를 실행하기 때문에 스크립트에 의존적인 html 이라면 정상적으로 작동하지 않을 수 있다.

 

boolean 타입. 기본 값 true.

 

 

defer 를 활용했을 때

<script src="../test.js" defer></script>

html 이 파싱될 때 스크립트를 다운로드만 시켜놓고, 실행은 html 파싱이 끝난 후에 한다.

 

장점 : 안전하다.

단점 : --

 

 

Vanila Script 로 코드를 짤 때

코드 가장 위에 'use strict'; 를  선언 해준다.

이렇게 하면 선언되지 않은 변수에 값을 할당하거나, 타입에 상관없이 변수에 값을 담는 등의 처리에 에러가 발생하게 된다. 

유연함은 사라지지만 보다 안전하다.

 

 

async 와 defer 를 같이 활용했을 때

--