[JavaScript] 스크립트 로딩 제어 (defer, async, onload, DOMContentLoaded)

Front/Javascript

JongHyun99 2021. 6. 4. 10:57

728x90

백엔드를 지망하지만 프로젝트를 하다 보니 비교적 덜 다뤘던 JavaScript를 더 많이 공부하게 되는거 같다.

내가 헷갈렸던것은 <script>가 와야할 위치와 defer/async, DOMContentLoaded 와 onload의 차이점이였고, 이번 시간에 그에 대해 공부해보았다.

<script>의 위치는 body 최하단이 제일 좋은 이유

만약 script 태그를 맨 밑에 놓지 못하는 상황이라면?

defer를 사용한다. // <script defer src="script.js">
html 중간에 스크립트를 만나도 바로 실행시키지 않고 지연시켜서 가 일어나며 이를 지연 시켜서 맨 밑에 놓은 것과 같은 효과를 일으킨다. ( html페이지가 전부 로딩된 이후에 script 실행됨)
```
<script defer src="script.js">
```
async를 사용한다.
html 중간에 스크립트를 만나면 html파싱과 script 로드를 동시에 하며 script 로딩이 완료되는 시점에 html 파싱을 중지하고 script를 실행시키고 실행이 끝나면 다시 html 파싱을 진행한다.
```
<script async src="script.js">
```

그러면 onload와 DOMContentLoaded는 무엇인가?

defer와 async는 html에서 로딩 순서를 제어하는것이라면 onload와 DOMContentLoaded는 JavaScript 내부에서 로딩 순서를 제어하는 것이다.

onload : 문서에 포함된 모든 페이지 구성요소(css, img등)가 로드된 후에 실행된다.

<body onload>
...
</body>

//혹은

document.getElementById("test").onload = function() { //실행될 코드 }

DOMContentLoaded : html의 조작에 필요한 DOM Tree가 끝나면 실행된다. ( ie8 이하에서 지원하지 않음)
```
document.addEventListener("DOMContentLoaded", function() {
	var test = document.querySelector("div");
});
```

DOM Tree가 완성되자마자 스크립트를 작동시키기 때문에 이 방법을 사용하는 것이 로딩 성능에 유리하다고 한다.

JQuery의 ready와 동일한 기능을 한다.

실행 순서는 ready < DOMContentLoaded < onload 이다.

공부한걸 요약해보자면

defer와 async는 html의 <script>태그의 속성으로 스크립트를 실행하는 순서를 제어한다.

onload와 DOMContentLoaded(ready)는 스크립트 내부의 이벤트 리스너이며 스크립트의 실행 시점을 제어한다고 한다.

자료를 보니까 defer와 onload 등 스크립트 실행제어 함수로서 역할과 기능이 비슷해보인다.

근데 그 둘의 차이점에 다룬 문서는 볼 수가 없었다.

그래서 어떤 용도로 적합하게 쓰일지 감이 오지는 않지만, 주로 onload나 ready함수 등으로

javscript 내부에서 제어하는 예제나 모습들을 많이 보며 defer보다 onload를 선호하는게 아닌가 생각이 든다.

defer(async)와 onload(ready)의 용도로서 명확한 차이점에 대해 더 공부해봐야 할듯 하다.

참고자료