TIL 10 | script 를 추가하는 옵션 4가지

Saemsol Yoo·2020년 12월 14일

JavaScript

javascript

목록 보기

1/25

https://youtu.be/tJieVCgGzhs
드림코딩 by 엘리 님의 유튜브 강의를 보며 정리한 내용입니다.

parsing HTML : 사용자가 HTML 파일을 다운로드 받았을 때, 브라우저가 한 줄 한 줄 씩 분석(parsing)하고, 이해한 것을 CSS와 병합해서 → DOM요소로 변환
fetching js : 필요한 자바스크립트 파일을 서버로부터 받아오는 것
executing js : 다운로드한 javascript files 를 실행

script 를 추가하는 옵션

① <head>

HTML 을 parsing 하다가 <script> 태그가 보이면, HTML parsing 을 잠시 멈추고 필요한 javascript 파일을 서버에서 다운받아서 이것을 실행한 후에, 그 다음에 다시 parsing 하는 부분으로 넘어간다.

단점 : js file 사이즈가 많이 크고, 인터넷은 굉장히 느리다면 사용자가 웹사이트를 보기까지 많은 시간이 소요된다.

② <body>

브라우저가 HTML을 다운 받고 계속 쭉 parsing을 해서 page가 준비가 된 다음에, 그 후에 script를 만나서 fetching(서버에서 받아오고), executing(실행) 한다.

단점 : 사용자가 기본적인 html의 컨텐츠를 빨리 본다는 장점은 있지만, 만약 웹사이트가 javascript에 굉장히 의존적인이라면 사용자가 정상적인 페이지를 보기전까지는 fetching 시간도 기다려야 하고, 실행하는 시간도 기다려야 한다.

③ <head> + async

async 를 사용하면 브라우저가 HTML을 받아 parsing 하다가, async를 만나게 되면 병렬로 main.js 파일을 다운로드 받자고 명령을 해놓고 계속 이어서 parsing을 한다. 그러다 main.js 의 다운로드가 완료되면 그때! parsing 하는 것을 멈추고 다운로드 된 js 파일을 실행한다. 그리고 실행을 마치면 남은 HTML parsing을 한다.

장점 : body 태그 안에 추가해서 사용하는 것보다는 fetching이 parsing 하는 동안 병렬적으로 일어나기 때문에 다운로드 받는 시간을 절약할 수 있다.
단점 : 하지만 javascript 가 HTML이 parsing 되기도 전에 실행이 되기 때문에, 만약 자바스크립트 파일에서 querySelector 를 통해 DOM요소를 조작한다면, 이 시점에 아직 해당 HTML 요소가 정의되어있지 않을 수 있다. 그래서 이 부분이 조금 위험할 수 있다.
그리고, HTML 을 parsing 하는 동안 언제든지 자바스크립트를 실행하기 위해서 parsing 이 멈출 수 있기 때문에 사용자가 page를 보는데 시간이 여전히 조금 더 걸릴 수 있다.

④ <head> + defer 👍🏻👏🏻✨

defer 를 사용하면 브라우저가 parsing 하다가, defer 를 만나면 main.js 다운로드 명령만 내려놓고 남은 HTML을 끝까지 parsing 한다. 그리고 parsing 을 마치면 다운로드 되어진 자바스크립트를 실행한다.

장점 : parsing 하는 동안 필요한 javascript 파일을 다 다운로드 받아두고, HTML parsing 을 끝까지 먼저 마치게 한 후 이어서 자바스크립트를 실행하기 때문에 DOM요소의 누락 문제도 없고 병렬적인 fetching을 하는 장점까지 있다.

async vs defer 🔥

① <head> + async

aync 는 정의된 script 순서와는 상관없이 다운로드가 먼저 된 파일대로 실행하기 때문에,,
async 옵션으로 다수의 script를 다운로드 받게 되면, b.js 파일처럼 먼저 다운로드 된 파일이 먼저 실행이 되어버린다. → 그리고 a.js → c.js 순서로 실행이 되는데, 만약 자바스크립트가 순서에 의존적이라면(=b.js 실행 전 반드시 a.js 가 선행이 되어야 하는 경우) async 옵션은 조금 문제가 될 수 있다.