1. 헤드에 그냥 script으로 자바스크립트파일을 걸어두면?
동작 순서
1. parsing: head 위부터 한 줄씩 html파일을 parsing한다.
2. fetching: script태그를 보고 필요한 JS파일을 서버에서 다운로드한다.
3. executing: 실행시켜 보여준다.
⇒ 단점: 자바스크립트의 파일이 크고 무겁다면, 화면에 나타나기 까지 오래걸린다.
2. 바디에 넣어두면?
- 마찬가지로 parsing -> fetching -> executing 으로 동작
- 페이지가 모두 파싱되고 마지막에 볼 수 있다.
⇒ 단점: 사용자가 의미있는 컨텐츠를 보기 위해서 JS를 이용해서 서버의 데이터를 동적으로 가져와야 하거나, 돔 요소를 이용해서 예쁘게 만들어 줘야 하는 경우 등.
사용자가 정상페이지를 보기전까지 대기시간이 발생한다.
3. 헤드에 <script asyn> 로 선언한다면?
- asyn는 불리언타입으로 선언만으로 true를 의미한다.
- 자바스크립트를 다운받으면서 html파싱을 동시에 병렬진행 한다.
- JS파일 다운로드가 완료되면, html파싱을 멈추고 자바스크립트 파일을 실행 한다.
- JS실행이 완료되면 다시 파싱을 진행한다.
⇒ 장점: html파싱과 동시진행되므로 JS파일 다운로드 시간을 절약할 수 있다.
⇒ 단점: 하지만 자바스크립트가 실행되는 시점에,
html파싱이 완료되지 않은(=정의되지 않는 요소) 에 대해 쿼리셀렉터로 돔 요소를 조작하는 등의 위험요소가 발생할 수 있다.
또한, 사용자가 페이지를 완전하게 보기 전까지, 여전히 대기시간이 발생한다.
4. 헤드에 <script defer>✨로 선언한다면?
- asyn과 마찬가지로, html파싱하다가 JS파일을 병렬로 다운로드를 진행한다.
- asyn과 달리, html파싱이 모두 끝난 후에 JS파일을 실행 시킨다.
- 정의되지 않은 요소를 조작하는 경우 등 위험요소가 발생하지 않는다!
- 굿!👍🏻
asyn vs defer 비교정리✨
- asyn
- 여러개의 js파일을 걸어두면, 내가 작성한 코드의 순서에 관계없이 먼저 다운로드된 파일부터 실행 된다.
- 즉 내가 원한 실행순서와 다르게 실행 된다.
- 순서에 의존적인 자바스크립트 파일이라면 문제가 될 수 있다.
- defer
- 여러개의 js파일이 있어도, 순서대로 다운로드 받고
- html파싱이 모두 끝난 후에 내가 작성한 코드의 순서대로 실행 된다.
- 즉 내가 원한 실행순서대로 차례로 실행된다.
- 그러므로, 가장 효율적이고 안전하다!
+) 자투리 정보
- 'use strict';
- 자바스크립트를 사용할 때, 가장 상단에 선언한다.
- 자바스크립트는 유연한 언어이기 때문에,
- 기존에 존재하는 프로토타입을 변경하거나, 선언되지 않는 변수에 값을 할당하는 등 개발자가 실수할 수 있음
- 미친듯한.... 행동!
- ECMAScript에 추가되어있다. (공식적)
🏃🏻♀️💨