오늘은 자바스크립트에 문서 로딩 순서 제어하기

작업을 준비하다 보면 작업을 하다보면 Script위치를 어디에 놓는게 좋을까요?

 

제일 좋은 방법은 body 태그 최하단에 놓는것이 가장 좋습니다!

 

일단 브라우저의 동작 방식은 

 

1. Html을 읽기 시작합니다

2. Html을 파싱합니다 

3. DOM 트리를 생성합니다 

4. DOM 트리 + CSS을 생성되고 로드가됩니다 

 

여기서 우리가 스크립트를 중간이나 최상위에 놓는다면 Html 읽는 과정에서 중간에 스크립트를 만난다면 

파싱을 하는데 지연이 될것이고 스크립트를 못읽는 현상이 발생할수도 있습니다

그래서 저희는 가장좋은 방법은 body 최하단에 script을 넣는것이 가장 좋습니다.

 

그럼 스크립트 로딩 순서를 제어해보죠 

 

async

<script async src="script.js"> 방식은 비동기 방식으로 html 중단되지 않고 진행이 됩니다 

 

defer

<script src="script.js" defer> 문서가 다 로드

된후에 script 실행입니다 

 

그럼이제 스크립트 내부에서 제어 하는 방식을 해보죠 

vs코드를 켜고~~!

첫번쨰 방식은 window 객체에 onload 활용해서 할수있습니다 

onload 방식은 내부의 코드에 문서에 모든 컨텐츠(img , something) 전부 로드가 된후에 실행이 됩니다!

 

2번쨰는

이벤트 방식으로 DOM이 생성된후에 로드 발생하고 script 실행하는 것입니다!

4가지 방식중에 상활에 맞는 load제어 방식을 활용하면 좋을꺼 같습니다 

 

시간이 남아서 번외로

이런 함수를 보신적있나요? 

이함수의 뜻은 즉시 실행한다는 함수선언인데 저기안에 실행코드를 넣으시면 바로실행입 됩니다!

 

오늘은 script 로딩 제어에대해서 공부를 해봤습니다!