자바스크립트의 모델
(window객체의 자식)
BOM // 자바스크립트로 브라우저 제어 (location,history..)
DOM // 자바스크립트로 현재페이지의 문서 제어 (document) // 자바스크립트로 제어하기 위한 노드객체를 생성
CSSOM // 자바스크립트로 CSS제어
자바스크립트의 로드 순서
자바스크립트 로드시에 발생하는 문제
1.아래의 경우 HTML을 파싱하다가 script태그를 만나면 HTML파싱(DOM객체생성)을 멈추고 JS파일을 읽는다
2.그런데 JS파일을 읽는 도중 test란 버튼을 못찾고 에러가 난다, 왜냐면 버튼은 아직 HTML파싱이 되지 않았기 때문에
<script src=‘’./a.js> // document.querySelector(‘#test’)
<button id=‘test’>
window.onload , DOMContentLoaded
1.위를 방지하기 위해 두가지 함수사용가능
1-1window.onload // HTML파싱후 DOM생성과 외부 컨텐츠(image,CSS)가 로드되는걸기다림
1-2 DOMContentLoaded // HTML파싱후 DOM생성만 기다림
1-3 그래서 1-2의 경우가 조금 더 빠르고 효율이 좋다
Defer (이게 더 권장됨)
<script defer>
자바스크립트 소스를 만나면
1.HTML파싱을 멈추지 않고
2.javsscipt파일을 그대로 받는다,
3.그리고 HTML파싱이 끝나면 받은 javascript파일를 실행한다
Async
<script async>
자바스크립트 소스를 만나면
1.HTML파싱을 멈추지 않고
2.javsscipt파일을 그대로 받는다,
3.javascript를 다 받으면 HTML파싱을 멈추고 받은 javascript를 실행한다,
4.HTML파싱을 재시작한다