javascript에서 파일의 위치와 async, defer에 대해 알아보기

html과 css로 레이아웃을 꾸민 후

input tag의 id 칸과 pw 칸에 조건이 맞으면 활성화가 되어 로그인 버튼이 파란색으로 바뀌는게 첫 과제였다.

 

구글링을 해가며 코드는 맞게 짠 것 같은데 실행이 되지 않아 제일 첫 줄 부터 디버깅을 시작했다.

ID값을 가져오는 부분부터 console.log를 찍어봤는데 첫번째 줄 부터 null이 나와서 당황스러웠다.

왜때문일까 고민하며 혹시 틀린 부분이 있나 싶어서 철자 하나하나 점 하나하나 다시 살펴봤지만 문제가 없다 생각했고

결국 SOS를 쳤다.

 

그 결과 javascript 태그의 위치의 문제였다.

html 파일을 위에서부터 아래로 순서대로 실행을 하는데 javascript 태그도 그의 영향을 받기 때문이었다.

css 파일은 head 태그에 넣어 맨 위에 위치해서 javascript 태그도 body 태그의 맨 위에 넣어주었던게 문제였다.

 

그래서 html 동작원리와 javascript의 async의 속성에 대해 공부해보았다.

---

html의 동작원리를 보면 html read -> html 파싱 -> DOM 트리 생성 ->Render 트리 생성 -> display에 표시 된다.

브라우저는 HTML 태그들을 읽는 도중 script 태그를 만나면 파싱을 중단하고 javascript 파일을 로드 후 javascript 코드를 파싱한다.

(이때 파싱(parsing)이란, 코드를 분해하고 분석하여 원하는 형태로 조립하고)

 

나의 경우에는 dom 트리가 생성되기 전에 자바스크립트가 생성되지 않은 dom의 조작을 하려고 해서 계속 오류가 떴다.

사실 css 파일은 head 태그 안에 넣어주길래 자바스크립트 파일도 제일 위에 있는게 좋을 것 같다고 생각해서 이런 오류가 발생한 것 같다.

 

그래서 우리는 자바스크립트 파일을 어디에 위치하는것이 좋을까?

DOM 트리가 완성된 후에 자바스크립트가 작동할 수 있도록 html의 body 태그 맨 마지막에 넣어주는 것이 좋다.

 

근데 굳이 굳이 자바스크립트 파일을 위에 넣고 싶다면 어떻게 해야할까?

그땐 async 또는 defer 속성을 넣어주면 된다!

<script async src="자바스크립트 파일명"></script>

<script defer src="자바스크립트 파일명"></script>

async 속성이 들어가면 

script 태그를 만나더라도 html의 파싱이 중단되지 않고

자바스크립트 파일의 로드와 파싱이 동시에 진행되고 자바스크립트가 실행되어야할 시점에 html의 파싱이 중단되었다가

자바스크립트파일의 실행이 끝나면 파싱이 다시 시작한다.

 

defer 속성이 들어가면

script 태그를 만나도 html 파싱이 중단되지 않고

html 파싱이 다 끝나고 나서야 script 태그가 실행된다.

 

상황에 따라 골라서 사용하면 될 듯하다.