JS_스크립트 로딩제어(defer, async, onload)
1) defer
<script defer src = "./main.js"></script>
html 페이지가 전부 로딩된 이후에 script가 실행된다.
html중간에 스크립트를 만나면 바로 실행시키지않고 지연시켜 html이 모두 종료된 이후 해당 스크립트를 실행한다.
스크립트를 가장 나중에 실행하는 지연특성
2) async
<script async src = "./main.js"></script>
html 중간에 스크립트를 만나면 html파싱을 중지하고 스크립트를 실행시키고 그 실행이 끝나면 html 파싱을 진행한다.
스크립트를 바로 실행시키는 비동기적 특성
3) onload
window.onload = function(){
let hw = document.getElementById('hw');
hw.addEventListener('click',function(){
alert("Hello world");
});
}
문서에 포함된 모든 페이지 구성요소(html , css) 등이 로드된 후 실행된다.
스크립트를 가장 나중에 실행하는 지연특성
즉, defer와 async는 script의 속성이고 online은 script 내부의 이벤트 리스너이다.
그래서 online은 하나의 파일에서 js와 html 등을 다같이 실행할 때 <body>의 가장 마지막에 입력하며,
defer와 async는 js,html,css 파일을 나눌 때 주로 사용한다.
*Reference
<script> 태그는 어디에 위치해야 할까요?
`` 태그는 어디에 위치하는 게 가장 좋을까요? 일단은 body 태그 최하단에 위치하는 게 가장 좋습니다. 이를 이해하기 위해선 브라우저의 동작 방식을 이해할 필요가 있습니다. 🔍 브라우저의 동
velog.io
https://jong99.tistory.com/118
[JavaScript] 스크립트 로딩 제어 (defer, async, onload, DOMContentLoaded)
백엔드를 지망하지만 프로젝트를 하다 보니 비교적 덜 다뤘던 JavaScript를 더 많이 공부하게 되는거 같다. 내가 헷갈렸던것은 가 와야할 위치와 defer/async, DOMContentLoaded 와 onload의 차이점이였고,
jong99.tistory.com