* 본 게시글은 '드림코딩 by 엘리'의 유튜브 영상을 기반으로 간략히 정리하여 작성되었습니다.
👩🏻💻 HTML에서 JavaScript 불러오기
HTML 읽는 것 : parsing
JS 다운받는 것 : fetching (본 게시글에서는 읽는다라고 표현했습니다)
JS 실행하는 것 : executing
💡 head + script
head 안에서 script를 불러올 경우
① HTML을 읽다 script를 발견한다
② HTML 읽는 것을 멈추고 main.js 를 다운받기 시작한다
③ main.js 다운로드가 끝나면 main.js 를 실행시킨다
④ main.js 실행이 끝나면 나머지 HTML을 읽는다
⑤ HTML을 다 읽으면 사용자에게 보여줄 준비 완료!
단점
js 파일이 크고 인터넷이 느릴 경우 사용자가 콘텐츠를 보기까지 시간이 오래 걸린다
💡 body + script
body의 맨 끝에서 script를 불러올 경우
① HTML을 읽는다
② HTML을 다 읽고 나면 사용자에게 보여줄 준비 완료!
③ script를 발견하고 main.js 를 다운로드하기 시작한다
④ main.js 다운로드가 끝나면 main.js 를 실행한다
장점
사용자가 콘텐츠를 빨리 볼 수 있다
단점
웹사이트가 js에 의존적이라면 사용자가 정상적인 콘텐츠를 보기까지 시간이 오래 걸린다
💡 head + script async
① HTML을 읽다 script를 발견한다
② async가 있는 것을 확인하면 HTML과 main.js 를 동시에 읽는다
③ main.js 읽는 것이 끝나면 HTML 읽는 것을 잠시 멈추고 main.js 를 실행시킨다
④ main.js 실행이 끝나면 나머지 HTML을 읽는다
⑤ HTML을 다 읽으면 사용자에게 보여줄 준비 완료!
장점
병렬로 읽어들이기 때문에 js 다운로드 받는 시간을 줄일 수 있다
단점
js가 실행되는 동안 HTML 파싱을 멈추기 때문에 콘텐츠를 보여주기까지 시간이 줄었다고 보기 어렵다
HTML이 다 파싱되기도 전에 js가 실행되기 때문에 js에서 필요로 하는 DOM 요소가 아직 파악되지 않았을 수도 있다
script가 여러 개일 경우 하나의 script 패치가 끝날 때마다 HTML 파싱이 멈춰진다
💡 head + script defer
① HTML을 읽다 script를 발견한다
② defer가 있는 것을 확인하면 main.js 를 다운로드하라고 명령한다
③ main.js 와 HTML을 동시에 읽는다
④ HTML을 다 읽으면 사용자에게 보여줄 준비 완료!
⑤ HTML을 사용자에게 먼저 보여주고 main.js 를 실행시킨다
장점
async와 달리 HTML 파싱이 멈춰지는 현상이 없다
script가 여러 개일 경우에도 HTML이 파싱되는 동안 js를 패치하고
파싱이 끝나면 순차적으로 js를 실행시키기 때문에 의도한대로 script를 실행시킬 수 있다
💡 TIP | use strict
스크립트 엄격 모드 (ECAMScript5 에서 소개됨)
브랜든 아이크가 급하게 자바스크립트를 만들게 되어 자바스크립트를 굉장히 유연한 언어로 만들어졌다
유연하다 === 위험하다 즉, 많은 실수를 범할 수 있다 는 의미이다
선언되지 않은 변수의 값을 할당한다든지 기존의 프로토타입을 변경한다든지 등
비정상적인 오류가 발생되곤 하는데 'use strict';를 선언해주면 해당 오류를 방지할 수 있다
참고 자료
드림코딩 by 엘리
