- console API는 웹 API 중 하나, 언어에 포함된 것이 아님
- API는 브라우저가 이해할 수 있는 함수
<head> 태그 안에 <script>를 넣은 경우 동작 과정
브라우저가 코드를 한 줄,한 줄 분석한다(parsing HTML) → 분석 결과를 CSS와 결합해서 DOM 요소로 변환
한 줄,한 줄 parsing하다가 <script>를 만나면 읽는 것을 멈추고 필요한 js를 다운로드(fetching)받고 실행하게 된다
- 만약 js 파일이 크고 인터넷 속도가 느리다면 페이지 로딩이 느려지므로 해당 방법은 권장되지 않는다
<body> 태그 안에 <script>를 넣은 경우 동작 과정
브라우저가 쭉 parsing하여 페이지가 준비된 다음에 <script>를 마주치게 된다
그 이후 과정은 위와 동일
- 페이지가 js를 받기 전에도 준비되어 사용자가 보여질 수 있다, 사용자가 기본적인 html 컨텐츠를 볼 수 있음
- 웹 사이트가 js에 의존적이라면 사용자가 fetching과 executing에 걸리는 시간을 기다려야한다는 단점
<head> 태그 안에 <script>를 넣되, async 속성 값을 사용하는 경우 동작 과정
async은 boolean 타입의 속성 값이기 때문에 선언하는 것만으로도 true로 설정된다
async 옵션을 주면, 브라우저가 parsing을 하다가 <script>를 만나면 병렬로 js를 다운로드받게 됨 → 다운로드를 시작하고 계속 parsing
다운로드가 완료되면 parsing하는 것을 멈추고 다운로드된 js를 실행
실행한 다음 다시 parsing 진행
- fetching이 parsing하는 동안 병렬적으로 진행되기 때문에 다운로드받는 시간을 절약할 수 있다
- js가 HTML이 parsing되기도 전에 실행되기 때문에 조작 시점에 HTML이 아직 정의되어 있지 않을 수 있다
- 사용자가 페이지를 보는데 시간이 걸린다는 단점이 해소되지 않음
<head> 태그 안에 <script>를 넣되, defer 속성 값을 사용하는 경우 동작 과정
V 가장 좋은 옵션
브라우저가 parsing을 하다가 defer를 만나면 다운로드를 받으라는 명령을 준 후 다시 parsing을 끝까지 진행 → parsing이 끝난 다음 다운로드가 완료된 js 실행
async vs defer
-
async
다운로드 시작 순서와는 상관 없이 다운로드가 완료된 것부터 시행
JS가 순서에 의존적이라면 문제가 발생 -
defer
다운로드를 다 받은 다음 순서대로 시행
