1. Page가 만들어지는 방법

01. head 내부에 script문 불어올 시

• parsing HTML -> Blocked(fetching js & excuteing js) -> parsing HTML
  • HTML 파일을 위에서 부터 아래로 순서대로 PARSING이 진행이 되다가 JS FILE을 만나면 PARSING을 멈추고 JS FILE을 FETCHING(다운)하고 EXCUTEING(실행)한 후 다시 HTML PARSING을 진행
    • JS FILE이 크고, 인터넷이 느리면 실행이 느려진다

02. body 하단에 script문 불러올 시

• parsing HTML(page is ready) -> fetching JS -> excuteing JS
  • 사전에 HTML PARSING이 전부 끝이 나고 나서 JS FILE을 FETCHING과 EXCUTEING을 진행 그러면 사전에 준비된 HTML 코드를 사용자에게 보여줄 수 있음
    • 사용자가 기본적인 단순한 HTML을 볼 수있지만 JS에 의존적이거나 의미적인 사이트를 보여주는데 시간이 걸린다(DELAY)

03. head 내부에 script문 불러올 시 (async)

• parsing HTML with fetching JS(병렬로 진행) -> block excuteing JS(after finished fetching) -> parsing HTML
  • FETCHING과 EXCUTEING의 시간을 줄일 수 있다
    • HTML이 PAFSING이 되기전에 JS가 끝이나면서 혹시나 모를 ERROR가 생길 수 있음
      그리고 여전히 BLOCK을 하기때문에 로딩 시간이 길어질 수 있음

04. head 내부에 script문 불러올 시 (defer)

• parsing HTML with fetching JS(병렬로 진행) -> excuteing JS(after finished fetching JS & parsing HTML)
  • parsing을 끝까지 하는 동안 JS가 fetching이 끝이나고 나서 EXCUTEING을 하기 때문에 페이지를 보여주면서 바로 자바스크립트를 진행할 수 있다

2. async vs defer

• 만약에 대량의 JS file을 사용할 시(ex use three JS file)

01. async

• parsing HTML with fetching JS(1, 2, 3)
  -> if (finished fetching JS 2) -> blocked (excuteing JS 2)
  -> if (finished fetching JS 1) -> blocked (excuteing JS 1)
  -> parsing HTML with fetching JS(3)
  -> if (finished fetching JS 3) -> blocked (excuteing JS 3)
  -> parsing HTML
• async를 사용시에는 JS 선언 순서와 상관없이 먼저 fetching 끝 난 JS file부터 excuteing이 되기 때문에 순서에 의존적이거나 중요할 경우 ERROR이 발생할 확률이 높다

02. defer

parsing HTML with fetching JS(1, 2, 3)
-> page is ready
-> excuteing JS (1 -> 2 -> 3)

• defer은 fetching이 끝나거나 먼저 끝내도 excuteing이 진행되지 않고 먼저 parsing을 끝까지 진행한 다음에 script에 선언된 순서대로 excuteing이 진행 된다!

3. 'use strict' (only banilla)

• 엄격 모드
• JS는 단 기간에 만들어지면서 코드가 엄청 유연한데 그걸로인한 문제점이 있다
• 선언되지도 않은 변수에 값이 할당이 된다던지 기존에 프로토타입이 변경되는 등 개발자의 오류가 나타날 수 있다 그렇기에 ECMAScript5에 추가된 use strict를 사용하게 되면 오류를 최소화 할 수 있다!