TIL : async vs defer

이번 주 목표는 엘리님이 올려주신 드림코딩 자바스크립트 기초 강의를 모두 듣고 미니게임을 혼자 만들어보는 것! 오늘부터 차근차근~

스크립트를 어디에 넣으면 좋을까?

1. script src =" " /script 를 head에 넣었을 때 :

사용자가 웹사이트에 들어왔을 때, JS 파일의 크기가 큰 경우 화면이 뜨기까지 기다려야 한다.

2. script src =" " /script 를 body에 넣었을 때:

사용자에게 html로 된 사이트가 먼저 보여지고 그 뒤 JS를 가져온다. 그러나 JS에 의존도가 높은 웹사이트일 경우 사용자가 온전한 페이지를 볼 때까지 시간이 걸린다.

3.head에 async를 추가했을 때 (script asyn src="" /script)

html을 분석하는 동안 병렬적으로 JS도 가져온다. JS를 실행되는 동안 html을 잠시 멈춰두었다가 다시 분석한다. 병렬적으로 작동하기 때문에 1,2번 방식보다는 조금 빠르다. 그러나 html이 완전히 분석되기 전에 JS가 실행되기 때문에, 원하는 정보가 아직 정의되어 있지 않을 수 있다는 위험이 있다.

4. head에 defer를 추가했을 때 (script defer src="" /script)

주인공은 마지막에 등장하는 법! 앞선 1,2,3번의 단점들을 극복한 가장 나은 방법이다. 가장 안전하며 효율적인 방법.

+ 꿀팁 : 'use strict';

바닐라 JS를 사용할 땐 파일 맨 위에 'use strict'를 선언하는 것이 좋다고 한다. 자바 스크립트는 너무 유연하기 때문에 다른 프로그래밍 언어에서는 시도할 생각도 못하는 기상천외한 코드도 작동할 수 있기 때문이다. strict모드를 사용하면 다른 프로그래밍 언어의 상식선(?) 정도로만 작동한다. 나는 아직 배워가는 입장이니까, 정석대로 밟아가는 이 방식이 무척 유용할 것 같다.