1. Script tag에 위치에 따른 문제점
1.1 head 사이에 쓰일 경우
1.
한줄 한줄 읽고 css를 만나 DOM형식으로 변환한다
2.
하지만 이 때 script를 head안에 포함시키면 script에 선언된 파일의 용량이 클 경우 로딩이 오래리는 문제점이 있다.
1-2 body에 쓰일경우
1.
page를 로딩하면서 html에 있는 콘텐츠를 빨리본다는 장점이 있지만 만약에 웹사이트가 javaScript에 굉장히 의존적이라면 사용자가 정상적인 페이지를 보기전 까지 fetching하는 시간과 executing시간을 기다려한다는 큰 단점이 있다.
2. head + async 사용
2-1 async란?
1. async는 boolean타입이어서 선언하는것만으로 true로 설정되서 사용가능, asyn를 사용하면 parsing하면서 script파일을 만나면 병렬로 진행시킨다.
장점 : 다운로드 받는시간을 절약 할 수 있음
단점 : 1.query selector를 이용해서 DOM요소를 조작하고싶은 경우 우리가 원하는요소가 아직
정의되지않을수 있음,
2.자바스크립트를 사용하기 위해서 멈추는 경우가 있어 사용자가 페이지를 보는시간이
좀 걸릴 수 있다.
ex)
async를 사용할 때 문제점 2
1.
순서 상관없이 javascript요소를 다운받는다. 그래서 자바스크립트가 순서에 의존적이면 async를 사용하면 문제가 될 수 있으니 주의해야한다.
3. head + defer
1.
parsing하는 도중 defer라는 속성을 만나면 main.js라는 파일을 다운받아야겟네라고 인지하고 계속적으로 parsing을 진행한다.
2.
마지막에 parsing이 끝나면 javascript를 실행시킨다.
3.
위에서 언급한 것 중에 가장 효율적인 방법이다.
ex)
•
defer는 순서대로 다운 받은 후 실행시켜 안정적이다.
3. use strict를 사용하자!
1.
기본적인 바닐라 JavaScrpit를 사용할 떄 user strict를 사용해야한다.
•
자바스크립트는 매우 빠른시간에 만들어져 굉장히 flexible한 언어
•
flexible === dangerous라는 말과 비슷하다
•
그래서 'use strict'라는 걸 써주면 선언되지않은 변수등 이상한 행동을 하지않는다.
•
실행할 때도 효율적으로 진행하기 때문에 성능측면에서 이점이 있다.
