2. script 태그의 async와 defer, use strict

• 간단히 짚고 넘어가는 부분

API (Application Programming Interface)

 

console.log() 또한 JS언어 자체에 포함된 것이 아니라 Console API이다

---

공부를 할 때 공식사이트를 확인한다.

 

JS 공식 사이트는 ecma-international.org

Home - Ecma International

또는 모질라

Mozilla | MDN

 

---

 

• head 안에 script

HTML에 script 태그가 들어가는 위치에 따라 작용하는 순서가 다르다

HTML을 파싱하는 중에 script 태그가 있으면 파싱을 멈추고 JS파일을 받아온다

그렇기에 head 태그에 script 태그를 넣게 되면 JS파일의 크기나 사용자 환경에 따라

페이지가 뜨는게 느리다고 느껴질 수 있다.

 

 

• body 안에 script

HTML body까지 파싱이 끝난 후 JS를 받아오도록 body 태그 끝나기 바로 전에 script 태그를 넣는 방법도 있다.

이는 head에 넣은 것과 다르게 사용자에게 페이지를 먼저 보여줄 수 있는 장점이 있지만

페이지 자체가 동적인 요소가 많은 등 JS파일에 의존적인 부분이 크다면

HTML 자체가 일찍 나타나도 JS파일을 fetching 하기 전까지는 제기능을 못하기 때문에 결국 사용자가 기다리게 되는것은 똑같다

 

 

• head 안에 script, async 속성 추가

head 안에 script를 넣고 async 속성을 넣게 되면 HTML이 파싱되는 중에 fetching js를 병렬로 처리하며

fetching이 끝나면 HTML 파싱을 멈추고 js파일을 실행한다

그러면 HTML파싱과 JS fetching을 동시에 하기 때문에 시간을 절약할 수 있다

그러나 fetching되어 실행한 JS파일에서 아직 파싱이 끝나지 않은 HTML의 요소를 조작하면

정상적인 작동이 되지 않을 수 있다.

또한 여러개의 스크립트를 불러올 경우

스크립트 태그의 순서와 관계없이 먼저 fetching이 완료 된 JS파일을 먼저 시작하기 때문에

아래 위치한 스크립트 태그가 위에서 불러온 JS파일에 영향을 받게끔 작성되어 있다면

정상적으로 작동하지 않을 수 있다.

 

 

• head 안에 script, defer 속성 추가

script 의 속성으로 async 대신 defer 를 넣어주게 되면 async와 같이 HTML 파싱과 JS fetching 을 병렬로 처리한다.

그리고 fetching이 끝나면 async와는 다르게 JS를 실행하는것을 HTML 파싱이 끝날 때 까지 기다리게 된다.

defer와 async의 또다른점은 여러개의 스크립트를 불러올 때, defer를 사용하면 스크립트 태그의 순서에 맞게

실행된다는 것이다.

async와 달리 순서의 의존성이 있는 JS파일들을 알맞게 실행시켜줄 수 있다.

 

---

 

• 'use strict'

js파일 상단에 'use strict'; 을 선언하게 되면

다른 언어들에선 문제가 되지만 js에선 기본적으로 문제시 하지 않는 부분을 잡아내준다(문법에 엄격해짐)

선언되지 않은 변수에 값을 할당해도 오류가 나타나지 않는다

'use strict' 선언 시 위와 같은 오류를 잡아줌

또한 'use strict' 모드를 사용하게 되면 JS 엔진이 더 효율적이게 분석하게 되어 성능개선을 기대할 수 있다고 한다