유튜브 드림코딩 엘리 "자바스크립트 2" 영상 참고
- node.js에는 자바스크립트 엔진이 있어 브라우저 없어도 터미널에서 node blah.js 이런식으로 입력하면 실행 가능
- 웹 API 중 하나인 Console API! js가 제공하는게 아니라 브라우저 제공 함수.
html에 삽입된 js 동작 순서
- parsing HTML -> blocked(그동안 fetching js&executing js) -> 다시 parsing HTML
- HTML을 쭉 파싱하다가 <script>태그 나오면 '오 이 js를 다운받아야하네'하고 파싱을 잠시 멈추고 필요한 js를 서버에서 다운.
- 단점: 이때 script의 용량이 크다면 성능 문제 생길수도 있어 <head>에 스크립트를 넣는 것은 좋지 않음.
- body안에, 마지막에 쓰면 페이지가 js를 받기 전에 기본HTML을 사용자가 볼 수 있으나 fetching js, executing js 을 기다려야함
head+async
- browser가 parsing하다가 병렬로 다운받자 명령을 해놓고 js 다운로드 완료되면 그 때 execute.
- 다운로드받는 시간을 줄일 수 있으나 js가 html parse전에 실행되므로 js에서 조작하려는 html 요소가 아직 정의돼있지 않을 수도 있음
- async를 사용하면 다운로드 순대로 실행하기 때문에 여러 js를 삽입한 경우 순서없이 실행된다.
head+defer
- parsing하다가 다운받자 명령만 받아놓고 html parse끝난후에 다운로드받은 js를 실행.
- defer 가 the best option.
- node.js에는 자바스크립트 엔진이 있어 브라우저 없어도 터미널에서 node blah.js 이런식으로 입력하면 실행 가능
- 웹 API 중 하나인 Console API! js가 제공하는게 아니라 브라우저 제공 함수.
'JavaScript' 카테고리의 다른 글
| 자바스크립트의 Promise란? (0) | 2021.08.07 |
|---|---|
| JS의 콜 스택 (0) | 2021.08.07 |
| 자바스크립트 클래스와 객체(object)의 차이 (0) | 2021.08.06 |
| javascript:void(0) (0) | 2020.12.23 |