Web API란? : JS가 제공하는 것이 아니라 브라우저가 제공하는 함수들.(더 많은 Web API들: https://console.spec.whatwg.org/)
Console Standard
Abstract This specification defines APIs for console debugging facilities. Table of Contents 1 Namespace console 1.1 Logging functions 1.1.1 assert(condition, ...data) 1.1.2 clear() 1.1.3 debug(...data) 1.1.4 error(...data) 1.1.5 info(...data) 1.1.6 log(..
console.spec.whatwg.org
Async vs Defer
HTML에서 JS를 삽입하는 방법에 따라 브라우저에 렌더링되는 순서가 달라진다.
JS를 삽입하는 다양한 방법을 확인하고 가장 효율적인 방법을 한번 알아보자.
1. <head> 태그 내에 <script> 삽입
단점: 중간에 JS를 다운하여 실행하는 시간이 있어 사용자에게 페이지가 빠르게 보여지지 않는다. => 비추!
2. <body> 태그의 끝 부분에 <script> 태그 추가
장점: HTML 코드가 빠르게 렌더링되기 때문에, 사용자가 빠르게 페이지를 볼 수 있다.
단점: JS를 이용해 서버와 통신해 데이터를 주고받는 단계가 맨 나중에 위치하므로, 이것이 많이 필요한 사이트라면 사용자가 많이 기다려야 할 수 있다.
3. <head> 태그 내에 속성 값으로 async(디폴트가 true) 사용
HTML 파싱 중 async 만나면 우선 JS 파일을 다운로드(fetching)하고, 다운로드가 다 끝나면 HTML parsing을 잠시 중단한 후에 JS를 실행한다.
장점: 병렬적으로 fetching 이루어지므로 시간이 상대적으로 줄어든다.
단점: 1. JS fetching이 먼저 일어나므로 querySelector 등으로 선택한 HTML 요소가 그 시점에 아직 parsing되지 않는 위험도 있다.
2. HTML parsing 중간에 JS fetching이 일어나므로, 여전히 사용자가 페이지를 보게 되는 시간이 길어질 수 있다.
4. <head> 태그 내에 속성 값으로 defer(디폴트가 true) 사용 => 가장 좋은 옵션!!
defer을 만났을 때 fetching 시작하지만, async와 달리 HTML parsing이 다 완료된 후 fetching 완료된 JS를 실행한다.
장점: 사용자에게 페이지를 빠르게 보여줄 수 있다. 또한 async의 경우 코드 작성 순서와 관계 없이 다운로드 완료되면 먼저 실행되지만, defer은 코드 작성 순서에 따라 실행이 가능하다.(아래 그림 참고)
use strict (엄격모드)
타입 스크립트에선 필요 X지만 바닐라JS에서는 맨 위에 'use strict' 정의해주는 게 좋다.
Why? => 유연한 JS의 성격 탓에 발생할 수 있는 문제(호이스팅 등) 방지. 또한 JS 엔진이 좀 더 빠르게 동작하기 때문에 성능 개선에도 유리한 면이 있다.
'개발 공부 > 자바스크립트' 카테고리의 다른 글
| [엘리의 드림코딩 JS] 5. 함수(Function) (0) | 2022.12.04 |
|---|---|
| [엘리의 드림코딩 JS] 4. 연산(operator) (0) | 2022.12.04 |
| [엘리의 드림코딩 JS] 3. 데이터 타입, 호이스팅 (0) | 2022.12.04 |
| [엘리의 드림코딩 JS] 1. JavaScript의 역사 (0) | 2022.12.01 |
| You Don't Know JS - 자바스크립트가 이렇게 재미있다고? (0) | 2022.11.10 |