javascript 가 브라우저에 load 되는 방식

css는 html 파싱을 방해하지 않고 독자적으로 로드와 파싱이 이루어지지만, javascript는 html 파싱을 방해하면서 다운로드된다.

브라우저가 html파일을 처음부터 읽어 나가며 파싱을 하다가,

script파일을 만나면, 우선 html 파싱을 멈춘다.

javascript를 모두 다운 받은 뒤 실행한다.

html 파싱을 이어나간다.

head에 javascript파일을 넣어서 렌더링할 경우,

아직 body부분의 dom이 만들어지지 않은 상태에서 javascript 코드가 실행되는 불상사가 생긴다.

이러면, js코드는 에러를 발생시킨다.

해결책 1.

따라서, head에 javascript 파일을 넣을 것이라면, DomContentLoaded이벤트나 load 이벤트를 활용한다.

window.addEventListener('load', init);

document.addEventListener('DOMContentLoaded', init);

load는 모든 리소스를 다운받은 뒤이고, DOMContentLoaded는 최초 html 문서가 완전히 로드 및 파싱되었을 때입니다. 즉, 스타일시트나 이미지 및 서브 프레임 로드를 기다리지 않습니다. 즉, 자바스크립트 파일을 실행시키는 타임이 html파싱 완료시이냐, 모든 리소스를 다운받은 뒤이냐의 차이일 뿐, javascript가 html의 파싱을 중지시키고 다운을 받아 html load 시간을 지연시키는 것은 변함이 없다.

해결책 2.

script 태그에 defer 속성을 추가합니다.

<script defer src="js/index.js"></script>

문서 로드를 방해하지 않으면서 js 소스를 서버에 다운로드 요청하고, 문서 로드가 끝난 뒤 js 코드를 실행하는 방식.

head에 script를 넣으면서 문제가 발생하지 않는 방식이다.

해결책 3.

body 끝에 script 코드를 넣는 방식.

script async 속성

defer처럼 문서 로드를 방해하지 않고 js 코드를 다운로드하지만, 다운로드가 완료되면 html파싱을 중지하고 js 코드를 실행한다.