JavaScript의 문서 로드 시점
- 웹브라우저 시작 (사용자가 페이지를 방문)
- 웹문서 읽기 (브라우저가 웹문서를 읽기 시작)
- DOM 생성 (DOM이 생성되면 DOMContentLoaded 메서드 실행)
1. DOMContentLoaded
- HTML과 script가 로드 된 시점에 이벤트 발생
- onLoad 이벤트 보다 먼저 실행
- 빠른 실행 속도가 필요할 때 적합
- IE8 이하의 브라우저 지원하지 않음 (상관X)
코드예시
window.addEventListener('DOMContentLoaded', (e) => {
...실행 될 코드
})
2. onload (load)
- 문서의 모든 리소스(images, js, css, etc)가 로드 된 후 이벤트
- 문서의 포함된 모든 컨텐츠가 로드된 후 실행되기때문에 불필요한 로딩시간이 발생됨
- 동일한 문서에 onload는 하나만 존재 해야 한다
중복 된 경우 가장 마지막 선언이 실행
외부 라이브러리에서 이미 선언된 경우 이를 찾아 하나로 합치는 과정이 필요
- 외부의 자원(iframe, image, script)을 사용하는 경우에도 해당
- window객체 뿐만 아니라 원하는 DOM객체가 로드됐을 때 코드설정 가능
코드예시
window.onload = () => {
...실행 될 코드
}
이렇게 선언 되면 해당 위(window)코드는 무시 됨 - 한 문서에 하나의 onload만 존재 가능
>> <body onload="실행 될 코드">
원하는 DOM객체에도 설정이 가능함
>> document.querySelector(".element").onload = () => {}
3. jQuery ready/load
- jQuey의 ready는 DOMContentLoaded와 동일
- load는 load와 동일
- ready의 경우 여러번 사용되면 선언 순서에 따라 순차적으로 실행됨
코드예시
jQuery ready
>> $(window).ready(() => {})
jQuery load
>> $(window).load(() => {})