Html에 JS의 위치 / JS 파일 선언의 기본

참조 :

www.youtube.com/watch?v=tJieVCgGzhs&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=3&t=188s

---

■ JS 파일 상단에 use strict

추가 참조 : beomy.tistory.com/13

1) 정의 :

자바스크립트가 묵인했던 에러들의 에러 메시지를 발생

엄격한 문법검사를 사용하는 parameter 추가

> ECMA Script 5 에서 부터 추가

> 실행시간이 좀더 개선 됨

 

2) node js 사용하는 경우

이미 strict 모드를 사용하고 있으므로 최상단에 다음의 주석을 추가

/*jslint node: true */

> 이렇게 함수 내부에서도 사용가능

(function () {
   'use strict';
   // this function is strict...
}());

(function () {
   // but this function is sloppy...
}());

---

■ Head 안에 포함

 

fetching 하면서 html 로딩 되자마자 block 하고 서버 / local에서 JS를 가져옴

> js 파일이 큰 경우 block이 바로 되어 waiting이 길게 일어나 user exprience가 낮음

 

 

■ Body 안에 포함

기본 html 콘텐츠는 바로 받고 body에서 Js를 서버 / local에서 가져옴

> Body 태그 바로 부르자 마자 맨 끝 하단에 위치 / 필요한 location에 위치

> 기본 사이트 뼈대 html은 바로 볼 수 있지만, 사이트 content 가 js에 dependency가 높은 경우

   유저가 보는 사이트가 뼈대만 있는 사이트인 경우가 있을 수 있음

 

■ Body 안에 포함 / async 사용

asyn : boolean type, deault is True

> async 인자를 보고 병렬로 JS를 로드

> 나머지 HTML을 parsing 하는 과정에서 js 로드가 완료되면 execute를 하고, 이때만 blocking이 됨

> async 특성상 JS 로드 완료 시점에서 나머지 HTML의 DOM 요소가 준비가 안되었을 수 있으므로,

   코드 동작성이 완전하지 않을 수 있음(parsing 전의 HTML의 JS가 참조하는 부분이 존재 안할 수 있음)

 

■ Body 안에 포함 / defer 사용

defer : boolean type, default is True

> defer 인자를 보고 병렬로 JS를 로드하되, script 실행 시점은 HTML DOM요소 parsing 끝난 시점

> 가장 좋은 방법, 페이지를 보여주고 나서 JS를 실행하게 됨

 

---

■ async / defer 비교

 

어차피 load 된 이후에 사용할 수 있다면 defer + head 를 이용하여 선언하는게 좋음

 

> 로드 완료 때 JS 바로 실행되면서 블로킹 일어남

> 어떤 JS가 먼저 로드가 끝날지 잘 모르는 상태

 

> 모두 로드가 완료되고 나서 JS 실행이 보장

> 호출 순서대로 JS 실행이 보장