1.
<head>
안에<script>
태그가 단순하게 포함 되어 있는 경우<head> <script src="main.js"></script> </head>
🟡 순서
1. 사용자가html
파일을 다운 받았을 때, 브라우저가 한 줄씩분석(parsing)
한다.
2.parsing
하다가,script
태그가 보이면html
파일의parsing
을 멈추고
필요한js
파일을 서버에서 다운받아서 실행한 다음에 다시parsing
한다.
🔴 단점
만약js
파일이 엄청 크고 인터넷이 엄청 느리다면?
사용자가 웹사이트를 보는 시간이 많이 소요되기 때문에 좋은 방법은 아니다.
2.
<body>
내부 제일 끝에<script>
태그를 추가 하는 경우<body> <script src="main.js"></script> </body>
🟡 순서
1.parsing
다 끝나고 나서js
파일을서버에서 다운(fetching)
한다.
🔵 장점
사용자가 기본적인html
컨텐츠를 빨리 볼 수 있다
🔴 단점
만약 우리의 웹사이트가js
에 굉장히 의존적으로 제작됐다면
즉, 사용자가 의미있는 컨텐츠를 보기 위해서는js
파일이 필수적이라면
사용자가 정상적인 페이지를 보기 위해서js
파일의parsing
&fetching
을 기다려야 함.
결국 이 또한 사용자가 웹사이트를 보는 시간이 많이 소요되기 때문에 좋은 방법은 아니다.
3.
<head>
안에<script>
태그에async
속성이 포함되어 있는 경우<head> <script async src="main.js"></script> </head> // boolean` 타입의 속성값이라 선언하는 것 만으로도 `true`로 설정이 되어 사용 가능
🟡 순서
1. 브라우저가parsing
하다가async
를 발견하면 병렬로js
다운 명령만 하고
계속html
파일을parsing
한다.
2.js
가 다운 완료되면 그때parsing
을 멈추고 다운된js
파일을 실행 한다.
3. 그리고 나머지html
파일을parsing
한다.
🔵 장점
다운로드 받는 시간 절약이 가능하다.
🔴 단점
html
parsing
전에html
파일이 실행되기 때문에 만약js
파일에서querySelector
를 통해DOM
을 조작 한다면 개발자가 원하는 요소가 정의되지 않을 수 있다.
parsing
하는 동안 언제든지js
의 실행을 위해 멈출 수 있기 때문에 사용자가 페이지를 보는 시간이 조금 더 소요 될 수 있다.
4.
<head>
안에<script>
태그에defer
속성이 포함되어 있는 경우 (가장 좋음!)<head> <script defer src="main.js"></script> </head>
🟡 순서
1. 브라우저가parsing
하다가defer
를 발견하면js
다운 명령만 시켜놓고
나머지html
파일을parsing
한다.
2.parsing
이 다 끝나면 다운된js
파일을 실행 한다.
즉, 필요한 파일 받아놓고html
parsing
먼저 한 뒤,
사용자에게 페이지 보여준 다음js
를 실행 하는 것
🔵 장점
다운로드 받는 시간 절약이 가능하다. 빠르게js
파일을 실행 할 수 있다.
async 와 defer 의 차이
async
정의된 스크립트 순서 상관 없이 다운된 애들 먼저 실행 한다.
만약 우리의 웹사이트가 스크립트 순서에 의존적이라면 위험defer
정의된 스크립트 순서대로 실행한다.
번외
일반적인 바닐라JS 로 코딩 할 때,
'use strict';
를 무조건 맨위에 선언하고 적는게 좋다고 한다.
자바스크립트는 아주 빠른 기간 동안 유연한 언어로 만들어졌기 때문에 때로는 위험하고,
그만큼 개발자들이 많은 실수를 할 수 있다는 것을 의미하기에
'use strict';
를 적게 되면...
1. 상식적인 범위 안에서js
를 사용 할 수 있다고 한다.
2.js
엔진이 조금 더 효율적으로, 빠르게js
를 분석 할 수 있고 성능 개선을 기대 할 수 있다.