자바스크립트의 역사
-
1993 Mosaic Web Browser 출시
-
1994 Netscape Navigator (조금 더 ui 요소가 더해짐)
-
Marc Andreessen - 어떻게 하면 동적인 웹사이트를 만들 수 있을까? 고려
-
Brendan Eich에게 Scheme Script 성격을 유지하면서 문법은 조금 더 java 스럽게 새로운 언어를 만들자고 제안 그런데 10일안에 만들자고 제안...!
-
(Mocha=) LiveScript 탄생
-
Navigator 안에는 LiveScript를 이해하고 실행할 수 있는 Interpreter를 포함시켜 브라우저를 출시
-
LiveScript를 JavaScript로 이름 변경
-
MS에서도 JavaScript를 따라한 JScript라고 이름을 붙힌 Script를 인터넷 익스플로우와 출시
-
개발자들은 너무나 다른 두 브라우저에서도 잘 동작하는 웹사이트를 만들어야 했음
-
1997 ECMA International JavaScript로 표준화를 만들어보자
-
ECMAScript1 출시
-
2000 MS Internet Explorer는 ECMA 표준안에 참가하지 않기로 선언
-
2004 Firefox출시 ECMA에 ActionSciprt3와 Tamarin으로 표준안을 다시 만들어보자고 제안
-
2004 Jesse James Garrett AJAX( 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있음) 도입
-
2008 Google Chrome just in time compilation 엔진이 포함된 브라우저 (자바스크립트 실행하는 속도가 빠름)
-
브라우저들이 다시 표준안을 만들어보자함
-
2009 ECMA Script5 출시
-
2015 ECMA Script6 출시 (class, arrow function, const, let, default)
html에서 js를 포함할 때 어떻게 포함하는게 더 효율적인지 알아보자
1. head안에 script 포함하는 경우
|---parsingHTML ---|fetching js|executing js|---parsingHTML ---|
브라우저가 html을 한줄씩 parsing하다가 script 태그가 보이면
html 파일을 parsing 하는 것을 잠시 멈추고, 필요한 js 파일을 다운받아서 실행한 다음에 parsing하는 부분으로 넘어가게 된다.
- 단점: js 파일이 사이즈가 크다면 웹사이트 보는데 많은 시간이 걸린다.
2. body의 맨 끝 부분에 script 태그 넣어주기
|------------parsingHTML -----------|fetching js|executing js|
- 장점: 사용자가 기본적인 웹 페이지 컨테츠를 빨리 볼 수 있다.
- 단점: 웹사이트가 js에 의존적인 사이트라면 사용자가 정상적인 페이지를 보기에는 많은 시간이 걸린다.
3. head + async
|----parsing HTML--|--blocked------|---parsing HTML----|
|--fetching js|--executing js-|
<head>
<script async src="main.js"></scirpt>
</head>브라우저가 async 속성 값이 적힌 script를 만나면
html parsing하다가 '병렬로 js 파일을 다운로드 받자!'라고 명령해놓고 다시 parsing을 한다.
js에 다운로드가 완료되면 그 때 parsing하는 것을 멈추고 다운로드된 js 파일을 실행하게 된다. 그리고 나서 html을 다시 parsing한다.
-
장점:
- fetching이 parsing하는 동안 일어나기 때문에 다운로드 되는 시간을 절감할 수 있다.
-
단점:
- js 파일이 html이 parsing되기도 전에 실행이 되기 때문에 만약 js 파일에서 query Selector를 이용해 dom요소를 조작한다고 하면 조작하려고 하는 시점에 html 요소가 정의되있지 않을 수 있어 위험하다.
- parsing하는 동안에 js 를 실행시키기 위해 언제든 멈출 수 있기 때문에 (blocked) 사용자가 페이지를 보는데 시간이 조금 더 걸릴 수 있다.
4. head + defer
|-----parsing HTML----|----executin js---|
|-fetching js-|
<head>
<script defer scr="main.js"></script>
</head>parsing을 하다가 script defer를 만나면 js를 다운로드 받자 명령을 해놓고 나머지 html을 끝까지 parsing하고
마지막에 parsing이 끝난 다음에 js을 실행 시켜준다.
