😲 시작하기에 앞서
이번 시간에는 우리가 HTML에서 자바스크립트를 포함할때 어떻게 포함하는게 더 효율적인지 짚고 넘어가보자.
1. head안에 그냥 script태그를 포함
이렇게 HTML을 쭉 parsing하다가 script 태그가 보이면 HTML을 parsing하는것을 잠시 멈추고 필요한 JS 파일을 서버에서 다운받아서 그것을 실행한 다음에 파싱하는 부분으로 넘어간다.
자바스크립트파일의 사이즈가 큰 경우에는 페이지가 로드 되는데 많은 시간이 소요되어 그냥 script를 head에 포함하는것은 좋지않다.
2. body안 끝 부분 script를 추가
HTML을 쭉 파싱해서 페이지가 준비된 다음에 script를 만나서 서버에서 받아오고 실행하게된다.
사용자가 기본적인 HTML컨텐츠를 빨리 본다는 장점은 있지만
자바스크립트 의존성이 큰 페이지인 경우, 사용자가 정상적으로 작동하는 웹 페이지를 보지는 못한다.
3. head + async
async는 boolean 타입이기 때문에 선언하는것만으로도 true로 쓸 수 있다.
브라우저가 HTML을 파싱하다가 async을 확인하고 병렬로 다운로드를 명령만 해놓고 다시 파싱을 하고 JS 파일이 다운로드되면 그때 파싱을 멈추고
다운로드된 JS 파일을 실행하게된다. 이후 실행을 다하고나서 나머지 HTML을 파싱하게된다.
다운로드받는속도를 절약할 수 있지만 HTML이 파싱되기도전에 실행이 되기 때문에 querySelector로 DOM 요소를 조작하려 한다면
위험할 수 있으며 HTML을 파싱하는동안 언제든지 자바스크립트를 실행하기 위해서 멈출 수 있기때문에
사용자가 페이지를 보는데 여전히 시간이 조금 걸릴 수 있는 단점이 있다.
3. head + defer
HTML을 파싱을하다가 defer를 확인하고 JS 파일 다운로드를 명령시킨후 나머지 HTML을 끝까지 파싱하게 된다. 이후 마지막
파싱을 끝낸 다음에 다운로드되어진 JS 파일을 실행하도록한다.
4. async / defer의 차이
async 옵션으로 다수의 script 파일들을 다운로드 받게 되면
정의된script순서에 상관없이 다운로드 된 파일을 우선적으로 실행하기 때문에
JS파일이 순서에 의존적이라면 문제가 생길 수 있다.
반면,
defer 같은경우는 모든 script 파일들이 다운로드 된 이후에
실행 되기 때문에 훨씬 안전하다.
5. 'use strict'
자바스크립트는 굉장히 유연한 언어이고 때로는 위험하다고한다.
선언되지 않은 변수에 값을 할당하거나 혹은 기존에 존재하는
protoType 을 변경할 수 있다.
JS 파일에 'use strict'; 을 적어주게 되면 이를 방지해준다.
