02강. console출력, script async와 defer차이점

 Developer tool 

window: Ctrl +Shift + i

mac: Ctrl +Option + i

 

WEB API(Applicatin Programming Interface): 브라우저가 제공, 이해하는 함수

https://developer.mozilla.org/ko/docs/Web/API/Console_API

 Dev Tools_F12 

console tab: 간단한 js 실행

sources tab: debugging(잘못된 부분 고치는것)시 유용

network tab: 발생, 데이터 검사

:

JS 공식사이트 ecma-international.org -비추

Mozila.MDN 사이트  https://developer.mozilla.org/  - 추천

비공식 사이트 www.w3schools.com   - 비추천

 

 async vs defer 
head에 script 포함: html을 parsing 하다가 js실행/ js 용량이 클경우 많은 시간소요
body에 script 포함: html 컨텐츠먼저 볼수 있음 / js의존 사이트일경우 제대로된 사이트x / js fetching 시간소요

 

head + async

async: boolean타입으로 선언만으로도 true로 설정

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

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

병렬 html parsing

다운로드 시간절약 / html정상실행 지연 / 다운로드 완료 순으로 실행: 순서있는 js라면 부적합(b->a)

 

head + defer

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

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

html parsing과 동시에 js fetching 후 순차적 js실행(a->b) / 효율적

 'use strict';  strict 모드 권유, 효율적엔진분석 

Whole-script strict mode syntax

Javascript is very flexible

flexible === dangerous

added ECMAScript 5