[JS] Jvascript를 HTML에 링크할때 효율적인 방법(script async 와 defer의 차이점 )

1. head 태그 안에 삽입

보통 헤드안에 script태그를 많이 삽입하여 링크하는데 (나도 그랬다)

html 문서를 파싱할 때 js를 가져오는 순서를 보면 아래의 그림과 같다.

 

1. 브라우저에서 html 문서를 한줄 씩 파싱하여 CSS파일과 병합하여 DOM요소로 변환한다.

2. 한줄씩 Parsing을 이어가다가 JS를 만나면, 파싱을 멈추고 JS파일을 다운로드 한다.

3. 다운로드가 완료되면 JS파일을 실행한다.

[단점]

가장 일반적인 방법이지만

JS 파일이 크다면 페이지가 로딩되는데 너무 많은 시간이 걸린다는 단점이 있다.

---

2. body 태그 안에 삽입

 

다른 방법으로 js파일을 바다태그안에 삽입하는 방법이 있는데

이렇게 하면, html 파일을 모두 파싱 후 js 파일을 링크할 수 있다.

 

[장점]

HTML 파일을 먼저 파싱 후 js파일을 fetching하기 때문에 사용자가 빠르게 페이지를 미리 볼 수있다.

 

[단점]

웹 브라우저가 JS에 의존적이라면, 사용자가 정상적인 기능을 보기까지 앞선 방법과 똑같이 오랜 시간이 걸린다는 단점이 있다.

 

---

3. head + async

 

3번째 방법은 async를 이용하는 방법이다.

 

head 태그안에 js파일을링크 할 때 asyn를 같이 적어주는 간단한 방법인데

async는 boolean타입이기 때문에 작성만해주어도 True값이 설정된다.

 

async로 js를 링크하면

1. HTML을 파싱하다가 js파을을 만나면 파싱과 다운로드를 병렬적으로 처리한다.

2. 다운로드가 완료되면 js 파일을 실행한다

 

효율적이지만 단점이 존재한다.

1. 파싱중 JS가 실행되기 때문에 JS가 QuerySelector 같은 부분을 사용하여 DOM요소를 조작한다고 하면,

그 부분이 아직 정의가 되어있지않아 위험할 수 가있다.

2. 단점이 하나 더 있는데 아래의 defer과 비교하며 작성하겠다.

---

4.head + defer

 

defer 방식의 링크는

js를 만나면 먼저 병렬적으로 다운만 한 뒤,

HTML 파싱이 모두 완료되면 그 때 순차적으로 실행한다.

 

자바스크립트 파일을 링크하는 제일 효율적인 방법이라고 한다.

---

async와 defer의 차이점

 

1. async는 js를 만나면 다운하고, 다운이 완료되면 무조건 실행한다.

 

따라서 웹 브라우저가 JS의 순서에 의존적인 파일이라면, 문제가 생길 수 있다.

(즉, 정의해둔 순서대로 JS가 실행되지 않는다)

 

defer 방식의 링크는 다운을 해둔 뒤, HTML파싱이 완료 된 후 순차적으로 실행 시킨다.

 

 

꿀팁 ('use strict' 선언)

자바스크립트는 유연하게 만들어짐 (빨리 만들어야했던 언어이기 때문)

비상식적인 부분도 그냥 허용(에러 표시 x)

 

이런 비상식적인 일을 막아줌

'use strict'

 

ex) 변수 선언

원래라면 브라우저에서 그냥 허용

use strict를 선언함으로써 이러한 현상들을 막아줌