드림코딩 by 엘리 : 자바스크립트 기초 강의 (ES5+)
<script/>
위치<head/>
<script/>
태그를 <head/>
태그 안에 넣으면 HTML을 parsing하고 중간에 JS파일들을 다운받아 불러오므로 사용자가 웹사이트를 보는데 시간이 오래 걸림
<body/>
끝
<body/>
안 끝부분에 <script/>
를 넣으면 기본적인 HTML컨텐츠는 볼 수 있지만, 웹사이트가 자바스크립트에 의존적이라면 이 또한 정상적인 페이지를 볼 때까지 JS파일을 fetching하는 시간이 오래걸림
<head/> + <script asyn/>
async
옵션을 사용하게 되면 브라우저가 HTML다운받아 parsing하다가 JS파일을 병렬로 다운 받자는 명령만 하고 JS가 다운로드가 완료가되면 그때 parsing을 멈추고 JS파일을 실행하는것. body끝에 사용하는 것 보다는 JS파일 다운로드 받는 시간을 절약
👉 단점 : JS가 HTML이 parsing 되기 전에 실행되기 때문에 JS파일에서 DOM요소를 조작하는 시점에 HTML이 정의되지 않을 수도 있기에 위험. HTML파싱 동안에 JS를 실행하기 위해서 HTML을 멈출 수 있기 때문에 사용자가 페이지를 보는데 시간 오래 걸림
<head/> + <script defer/>
defer
옵션은 parsing하다가 JS를 다운받자고 명령만 시켜놓고 나머지 HTML을 끝까지 parsing, parsing이 끝난 후에 다운로드 완성된 JS파일을 실행함, 가장 좋은 옵션.
<script asyn/> vs <script defer/>
정의된 스크립트 순서에 상관없이 다운로드가 먼저 된 파일을 실행, JS파일이 순서에 의존적이라면 async
추천 X.
순서대로 스크립트가 실행이 됨. 제일 효율적이고 안전하다.